質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.12%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 410
退会済みユーザー

退会済みユーザー

<body>
    <div class="all_contents" id="all_contents">
        <div class="left_nav">

        </div>
        <div class="main_contents">


        </div>
        <div class="right_nav">
        </div>
    </div>
</body>
@import "./common.scss";
@import "./font.scss";
.all_contents {
    position: absolute;
    top: 0;
    left: 0;
    width: 1440px; /////
    .left_nav {
        width: 319px; //320
        height: 964px;
        position: absolute;
        top: 59px; //60
        left: 0px;
    }
    .main_contents {
        width: 55.6vw;
        height: 904px;
        position: absolute;
        left: 320px;
        top: 120px;
        border: solid 1px lightgray;
        border-bottom: none;
    }
    .right_nav {
        //main_contentsに隣接させたい
     width: 320px;
        height: 904px;
        background-color: lightblue
    }
}

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    退会済みユーザー

    2018/01/24 15:06

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

    キャンセル

  • kei344

    2018/01/24 15:13

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

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2018/01/24 15:15

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

    キャンセル

回答 3

checkベストアンサー

+2

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

.right_nav {
  ...
  position: absolute;
  top: 59px;
  left: calc( 320px + 55.6vw );
}


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

.main_contents {
  // width: 55.6vw;
  width: 100vw;
  max-width: 800px;
  ...
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/24 18:06

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

    キャンセル

+1

.left_nav {
        width: 319px;
        height: 964px;
        margin-top: 59px;
        float:left;
    }
    .main_contents {
        width: 55.6vw;
        height: 904px;
        margin-top:120px;
        float:left;
        border: solid 1px lightgray;
        box-sizing: border-box;
        border-bottom: none;
    }
    .right_nav {
        width: 320px;
        height: 904px;
        background-color: lightblue;
        float:left;
    }


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/24 15:32

    float:left!なるほどです!ありがとうございます、ちょっと試してみます

    キャンセル

  • 2018/01/24 15:36

    floatだと親の.all_contentsが高さをなくすので
    .all_contents {
    overflow:hidden;
    }
    も追加してください。

    キャンセル

+1

flexboxは試しました?

.all_contents {
  display: flex;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる