cssでマルチカラムレイアウトで下まで伸ばす方法

前提・実現したいこと

navを下までもっていきたい
これを↓

こうしたい↓

section部分はめっちゃ下まで続くものが入る予定です

該当のソースコード

css
1header{
2  display:block;
3  width:100%;
4}
5nav{
6  background-color:#f5f5f5;
7  float:left;
8  width:150px;
9  border-right:1.5px solid #fbcfff;
10}
11section{
12  float:left;
13  width:auto;
14  border:1px;
15}

html
1<!DOCTYPE html>
2<html lang="en" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <title>027</title>
6  </head>
7  <body>
8    <style type="text/css">
9      @import url(026.css); <!-- 上のcssファイルを指定-->
10    </style>
11    <header>
12      <h2><a href="hage.html" target="section" style="text-decoration:none;">title</a></h2>
13    </header>
14    <nav bgcolor="#F5F5F5">
15      <p>
16      <a href="piyo.html">piyo</a><p>
17      hoge<p>
18      fuga<p>
19    </nav>
20    <section>
21      <!-- 割愛-->
22    </section>
23  </body>
24</html>

nt4c

2019/09/04 01:26

「下まで」というのがブラウザの高さいっぱいまでか、横に並んでいるセクションと同じ高さまで伸ばしたいかによって回答が異なってきますがこの場合どちらでしょうか？

aluminuser

2019/09/04 02:16

横に並ぶセクションと同じ高さまででお願いします

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

回答2件

ベストアンサー

横に並んでいるセクションの高さに合わせてnavの高さを合わせたいということでしたらFlexboxの利用をおすすめします。
細かい使い方は「CSS Flexbox」などで調べるとヒットしますので割愛しますが、今回の要件でしたら以下のような記述で対応が可能です。

html
1<div class="container">
2  <nav></nav>
3  <section></section>
4</div>

css
1.container {
2  display: flex;
3}
4.container > nav {
5  width: 150px;
6}
7.container > section {
8  width: calc(100% - 150px);
9}

参考サイト：日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス

投稿2019/09/04 02:25

nt4c

総合スコア768

aluminuser

2019/09/04 02:38

適切に動きましたありがとうございます

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

bodyのheightは、初期値でautoになっており、中にある要素によって高さが決まります。現在のCSSは、 navやsectionのheightを決めていません。
navやsectionのheightを指定したら、そのぶん下に伸びると思いますが、左のnavを固定して良いなら、 navをposition: fixedのleft: 0, height: 100%(headerも高さを決めてheaderの高さを引いてbottom: 0)にすれば良いと思います。

bodyをposition: fixedにし、 width: 100%, height: 100%の状態で、 navのheightを100%(headerを引いたぶん)にしても一応可能だと思います。

投稿2019/09/03 21:21