headerもmainも高さを固定にできない時。

headerの高さは固定にしたいけど内容によっって高さが変わる可能性がある。
mainも同様で、どちらの高さも決めれない場合に頭を抱えた。

経緯

管理画面の開発していると、ユーザの設定内容によって要素の量が異なるため、
width(幅)やheight(高さ)を固定値で決め打ちするのが難しいねん。

これではheaderを固定値にしてその固定値から計算して、
main内の高さを出すやり方が使えなかったりする。

js使ったら現在値取得して簡単にできると思うけど、
なるべくシンプルなcssで作りたいし、なんとかなんか〜、
と考えた挙句、これならどうや！ と閃めいて実装した。

結果

html

<div class="wrapper">

　<!--- 高さが可変なヘッダー -->
　<header>
　　<div>ロゴマークなど</div>
　　<p>この要素は2行にも3行にもなるため高さ可変なると仮定</p>
　</header>

　<!--- 高さが可変な中身 -->
　<main>
　　<menu>
　　　<ul>
　　　　<li><a>menu1</a></li>
　　　　<li><a>menu2</a></li>
　　　　<li><a>menu3</a></li>
　　　　<!--- このあと4,5,6...と永遠に可変（ここはスクロールにしたい） -->
　　　</ul>
　　</menu>
　</main>

</div>

sass

.wrapper {
 display: flex;
 flex-direction: column;
 height: 100%;
 overflow-y: auto;
}

header {
 position:sticky;
 top: 0;
 pointer-events: unset;
 z-index: 1;
}

main {
 flex: 1 0 auto;
}

説明

とりあえずwrapperはflexにして、子要素のmainにflex:1 0 auto;を指定する。
これでmainはとりあえずウインドウの下まで伸びる。
※headerにはheightは指定しない。

あとはheaderにstickyをsetし、上部に固定する。
これだと内容（menu）はどれだけ増えても大丈夫。
※スクロールは入れとかないとね。

ポイント

menuがstickyの下に隠れた時に、menuがクリックできてしまう。
これを防ぐためにpointer-events: none;を入れたが、なぜか効かない（クリックできてしまう）
pointer-events: unset;をいれたら効いたの（クリックできなくなった）でこれにしました。
なんでだろ。

とりあえず忘備録で走り書き。
また使う時が来ると思うので、その時にまたこの記事をバージョンアップ予定。