HTML:高さを指定せずにスクロール可能にする
HTMLで以下を行う方法がわからなくて困った。ある程度解決したのでこれは、そのメモ書きである。
問題
ヘッダを固定し、その下のコンテンツは自由に上下スクロール可能としたい。ただし、ヘッダの高さは不定でありheightは指定しない。またコンテンツ領域のheightも指定したくない。
できあがりはこんなものだ。
よくある解決
よくある解決として以下のものである。検索するとあちこちに同じことが書いてあり、非常に邪魔くさい。というのも、この方式だと、width、heightを指定しないとスクロールできないのである。こちらとしては縦横が固定していない状態でスクロールしたいのである。
div {
width: 200px;
height: 100px;
overflow: auto;
}
あるいは、縦方向のみの場合は「overflow-y: scroll」などだ。これを書いた人は、表示領域の縦横をピクセルサイズで指定するという場面しか無いのだろうか？非常に不思議だ。
あるいは、昔のやり方がそのまま残っているのだろうか？
Stackoverflowにあった解決法
なんとか探し当てたのが、Flexbox with fixed header and footer and scrollable contentである。
この投稿ではヘッダの他にフッタも固定しており、少々わかりにくのだが、思い切って単純化してみた。
わざわざタグにスタイルを設定している理由は、スタイルシートを使わず、GWTによってその場で指定したいからである。
<!DOCTYPE html>
<html style="margin:0; height: 100%">
<body style="margin:0; height: 100%">
<div style="display: flex; flex-direction: column; height: 100%;">
<div>top line<br>line two<br>line three<br>line four</div>
<div style="flex: 1; overflow: auto;">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
</div>
</div>
</div>
</body>
</html>
ちゃんと以下になる。
このような動作になる原理
これはまだわかっていない。ともあれ、所望の動作にすることはできている。
フレックスボックスというのだそうだ。CSS【 flex 】 ～ フレックスボックスに説明があるが、要するに親要素を決め、その中の子要素の並べ方を指定するものらしい。
入れ子にすることはできるか？
入れ子にしても問題無い。この場合、入れ子の二番目は親要素でもあり、子要素でもある。
<!DOCTYPE html>
<html style="margin:0; height: 100%">
<body style="margin:0; height: 100%">
<div style="display: flex; flex-direction: column; height: 100%;">
<div>top line<br>line two<br>line three<br>line four</div>
<div style="flex: 1; overflow: auto; display: flex; flex-direction: column; height: 100%;">
<div>aaaa<br>bbbb<br>cccc<br>dddd</div>
<div style="flex: 1; overflow: auto;">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</body>
</html>