【忘備録】
ヘッダーも内容、どちらの高さも決めれない場合のフレキシブな２カラム。
【経緯】
システム系の開発していると、ユーザの入力内容によって要素の量が異なるため、
ヘッダーやメインのwidth(幅)やheight(高さ)を固定値で決め打ちするのが難しい。
これではヘッダー固定値にしてその固定値から計算して高さを出すやり方が使えなかったりする。
js使ったら現在値取得して簡単にできると思うけど、そんなのいちいち作りたくないし、
なんとかならないものかと考えに考えた挙句、これならどうだ！的なのを閃いた。
【結果】
html
<divclass="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:10auto;}【説明】
とりあえずwrapperはflexにして、子要素のmainにflex:1 0 auto;を指定する。
これで内容はとりあえずウインドウの下まで伸びる。
※headerにはheightは指定しない。
あとはheaderにstickyをsetし、上部に固定する。
これだと内容（menu）はどれだけ増えてもスクロールでいける。
【ポイント】
maenuがstickyの下に隠れた時に、menuがクリックできてしまう。
これを防ぐためにpointer-events: none;を入れたが、なぜか効かない（クリックできてしまう）
pointer-events: unset;をいれたら効いたの（クリックできなくなった）でこれにしている。
なんでだろ。
とりあえず忘備録で走り書き。
また使う時が来ると思うので、その時にまたこの記事をバージョンアップ予定。