right_navをmain_contentsの右側に隣接させたい

html
1<body>
2    <div class="all_contents" id="all_contents">
3        <div class="left_nav">
4
5        </div>
6        <div class="main_contents">
7           
8
9        </div>
10        <div class="right_nav">
11        </div>
12    </div>
13</body>

scss
1@import "./common.scss";
2@import "./font.scss";
3.all_contents {
4    position: absolute;
5    top: 0;
6    left: 0;
7    width: 1440px; /////
8    .left_nav {
9        width: 319px; //320
10        height: 964px;
11        position: absolute;
12        top: 59px; //60
13        left: 0px;
14    }
15    .main_contents {
16        width: 55.6vw;
17        height: 904px;
18        position: absolute;
19        left: 320px;
20        top: 120px;
21        border: solid 1px lightgray;
22        border-bottom: none;
23    }
24    .right_nav {
25        //main_contentsに隣接させたい
26　　　　 width: 320px;
27        height: 904px;
28        background-color: lightblue
29    }
30}

ライトナビをmain_contentsの右隣にに隣接させたいです。main_contentsのwidthをpxにすればできるのですが、main_contentsだけwidthをvwで指定したいです...。
どなたか教えてください(>_____<)

追記
main_contentsのwidthは絶対に55.6vwがいいというわけではありません。
全体の横幅1440px、左ナビ320px、右ナビ320pxの間をmain_contentsで埋めて、ウィンドウの横幅に応じてmain_contetnsの横幅が変化してくれる仕組みを作りたいといった形です

kei344

2018/01/24 05:48

absoluteで配置するとスクロールできませんが、横幅1440px以下の端末や縦幅904px以下の端末は無視するということでしょうか。

退会済みユーザー

2018/01/24 05:57 編集

そうですそうです！！！例えばウィンドウの右端を掴んで、右からウィンドウを縮めていくと右ナビは画面から消えます。左も同様です。ただメインコンテンツだけがウィンドウの横幅と連動して画面から消えないみたいな感じです！

kei344

2018/01/24 06:02

今の書き方では上下もスクロールできませんが、公開する予定のないHTMLなのでしょうか。

退会済みユーザー

2018/01/24 06:06

公開します！これはコードをほとんど消してますが、スクロールするような項目はこの内部にあります！

kei344

2018/01/24 06:13

https://jsfiddle.net/87cw29ju/ スクロールできますね、すみません勘違いしていました。失礼しました。

退会済みユーザー

2018/01/24 06:15

そうですね、スクロールできないっていうか、縦方向のウィンドウのサイズの変化には対応できないって感じです。でもそれは大丈夫です

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

回答3件

ベストアンサー

calc() という便利な関数がありますよ。

scss
1.right_nav {
2  ...
3  position: absolute;
4  top: 59px;
5  left: calc( 320px + 55.6vw );
6}

ただし、追記やコメントからすると .main_contents を画面幅以内に収めるのが目的のようですので .main_contents の width を以下のようにして、他の回答のように float などを使って並べると完成イメージに近づくのかなと思いました。

scss
1.main_contents {
2  // width: 55.6vw;
3  width: 100vw;
4  max-width: 800px;
5  ...
6}

投稿2018/01/24 08:55

CODEISLE

総合スコア251

退会済みユーザー

2018/01/24 09:06

ありがとうございます！！！floatだと、画面の横幅を広げ過ぎた時に、右ナビがなぜか画面から消えてしまいます...。calcだと綺麗にできましたので、calcでやってみようかなと思います...

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

flexboxは試しました？

CSS
1.all_contents {
2  display: flex;
3}

投稿2018/01/24 09:42

x_x

総合スコア13749

CSS
1.left_nav {
2        width: 319px;
3        height: 964px;
4        margin-top: 59px;
5        float:left;
6    }
7    .main_contents {
8        width: 55.6vw;
9        height: 904px;
10        margin-top:120px;
11        float:left;
12        border: solid 1px lightgray;
13        box-sizing: border-box;
14        border-bottom: none;
15    }
16    .right_nav {
17        width: 320px;
18        height: 904px;
19        background-color: lightblue;
20        float:left;
21    }

position:absoluteをはずしてfloatで左に全部くっつけました。
絶対配置ではなくなったのでmarginで余白をつけました。
この上にコンテンツがある場合はmarginで調節してください。
main-contentsは画面幅に合わせて小さくなっていき、サイドのナビはそのままの大きさになります。

投稿2018/01/24 06:26