高さの調整

中身がある場合では高さが自動的に変更しますが、中身が小さい場合、真ん中のsectionだけ大きくして、全体を100%表示したいというときの処理です。説明がうまくないのですが、サンプルのような画面を作りたいときは下記のような指定をするとうまくいきます。

サンプルページ

styleの設定は下記のようになります。

 *{margin:0;box-sizing: border-box;}
 html{overflow-y:scroll;}
 #base{min-height: 100vh;background-color:#000;}
 header{background-color:aquamarine;height:60px;}
 section{background-color:navy; min-height: calc(100vh - 120px);}
 footer{background-color:orange;height:60px;}

htmlの設定は下記のようにしています。

<div id="base">
<header>header</header>

<section>section</section>

<footer>footer</footer>
</div>

2017/10/28 サンプルページを追加しました。
2017/05/25 ページ作成

関連記事