左側のdiv(サイドメニュー)の幅は変えずに、右側のdivの幅は画面一杯にしたい

##状況

Web開発の勉強をしています。
まだレイアウトを決めている時点ですが、ページの構成としては、左側にサイドメニューを置いて、右側のスペースにメニューで選択したコンテンツを表示させたいです。

##実現したいこと
ブラウザのウィンドウサイズを変更した際にサイドメニュー(id="sidemenu")の幅は変えずに、右側のスペース(id="content")の幅をサイドメニューの残りの幅いっぱいにしたいです。この場合どのようにwidthを指定すればいいんでしょうか？

html
1<!doctype html>
2
3<html>
4
5  <head>
6    <meta charset="utf-8">
7    <title>Hello React</title>
8    <link rel="stylesheet" type="text/css" href="/statics/css/style.css" media="all">
9  </head>
10
11  <body>
12    <div id="sidemenu"></div>
13    <div id="content"></div>
14    <script src="/statics/js/bundle.js"></script>
15  </body>
16
17</html>

css
1html {
2    height: 100%;
3    width: 100%;
4}
5
6body {
7    margin: 0;
8    height: 100%;
9    width: 100%;
10}
11
12#sidemenu {
13    float: left;
14    width: 250px;
15    height: 100%;
16    margin: 0;
17    padding: 0;
18}
19
20#content {
21    float: left;
22    height: 100%;
23    width: /*?????HERE?????*/
24}

行動規範の内容に同意します

回答3件

CSS
1#content {
2  width: calc(100% - 250px);
3}

で、どうでしょうか。
calcには必要に応じてベンダープレフィックスをつけてください。

投稿2017/10/24 06:48

退会済みユーザー

総合スコア0

akamakku

2017/10/24 07:03

cssのファイル内で計算できるんですね！！ありがとうございます！

行動規範の内容に同意します

上記のコードで[#content]の[float: left;]を消したら幅いっぱいになりましたよ

投稿2017/10/24 06:49

wasabisky

総合スコア14

自己解決

これでできました

css
1html {
2    height: 100%;
3    width: 100%;
4}
5
6body {
7    margin: 0;
8    height: 100%;
9    width: 100%;
10}
11
12#sidemenu {
13    float: left;
14    width: 250px;
15    height: 100%;
16    margin: 0;
17    padding: 0;
18}
19
20#content {
21    float: left;
22    height: 100%;
23    width: 100%;
24    margin-left: 250px;
25}