[CSS]ウィンドウサイズに追従するエリア

ブラウザベースのシステムを構築する際、一覧表を表示するページでは、上部に検索条件を入力するエリアがあり、その下に一覧表（table）を表示するケースがよくあると思う。

検索した行数が多くなれば、当然縦スクロールが発生し、普通にtableを書くと、1行目のタイトル行がスクロールで見えなくなってしまう。

出来れば、デスクトップアプリのように、一覧表のエリア内でtableがスクロールして欲しい。そうすれば、検索条件のエリアもスクロールしなくて済む。

そのためには、まず、ウィンドウサイズに追従するエリアを配置し、その中に、縦横スクロールを考慮したtableを書く必要がある。

ここでは、ウィンドウサイズに追従するエリアの作り方を紹介する。

基本
実践向け
参考サイト

基本

ブロック要素なので幅は100%を指定すればいい。問題は高さ。

以前までは、jQueryのresizeイベントで、ウィンドウの高さを取得し、そこからヘッダや検索条件エリアの高さを引いてごにょごにょ計算してたが、display:flex; が使えるようになってからは、CSSだけで実装できる。

body直下の要素に、display:flex;flex-direction:column;height:100vh; を指定する。
高さを100vh（ブラウザの表示エリアの高さ全部）を指定し、中の要素自体は縦並びにする。

ウィンドウサイズに追従させたい要素には、flex:1; を指定する。

デモはこちら。
https://yypark.com/anything-nothing/demo/69/t1.html

ブラウザのサイズを変えると、ベージュの一覧表エリアがウィンドウサイズに追従していく。

HTMLコードとCSSの指定は下記のとおり。
検索条件エリアは、簡易的に、height:200px;としておく。

<body>
<div class="body">

<h1>ウィンドウサイズに追従するエリアのデモ 基本</h1>

<div class="condarea">
<p>ここは検索条件エリア</p>
</div>

<div class="listarea">
<p>ここは一覧表エリア</p>
</div>

</div>
</body>

body {
	margin:0;
}

.body {
	/* body 直下の要素に以下を指定 */
	display:flex;
	flex-direction:column;
	width:100%;
	height:100vh;
}
.condarea {
	border:1px solid #0000ff;
	background:#ffff99;
	height:200px;
}
.listarea {
	border:1px solid #ff00ff;
	background:#ffcc99;

	/* ウィンドウサイズに追従させる要素には以下を指定 */
	flex:1;
}

実践向け

基本では、デモ向けに必要なコードだけしか書いていない。

実際にシステムの画面となると、こんな単純なコードでは済まない。<header>も使うだろうし、<footer>も使うだろう。

その場合は、body直下の要素から、ウィンドウサイズに追従させる要素の間の要素に、flex:1; display:flex; flex-direction:column; を指定する。

下記のデモの場合、articleに対して、上記の指定を行っている。

デモはこちら。
https://yypark.com/anything-nothing/demo/69/t2.html

HTMLコードとCSSの指定は下記のとおり。
検索条件エリアは、簡易的に、height:200px;としておく。

<body>
<div class="body">

<header>
<h1>ウィンドウサイズに追従するエリアのデモ 実践向け</h1>
</header>

<article>

<section class="condarea">
<p>ここは検索条件エリア</p>
</section>

<section class="listarea">
<p>ここは一覧表エリア</p>
</section>

</article>

<footer>
<p>| メニュー1 | メニュー2 | メニュー3 | メニュー4|</p>
</footer>

</div>
</body>

body {
	margin:0;
}
.body {
	/* body 直下の要素に以下を指定 */
	display:flex;
	flex-direction:column;
	width:100%;
	height:100vh;
}

header {
	background:#00ccff;
}
header h1 {
	margin:0;
	padding:10px;
	color:#ffffff;
	font-size:1rem;
}

article {
	border:1px solid #ff0000;
	padding:10px;

	/* ウィンドウサイズに追従させる要素との間いに入る要素には以下を指定 */
	flex:1;
	display:flex;
	flex-direction:column;
}
.condarea {
	border:1px solid #0000ff;
	background:#ffff99;
	height:200px;
}
.listarea {
	border:1px solid #ff00ff;
	background:#ffcc99;

	/* ウィンドウサイズに追従させる要素には以下を指定 */
	flex:1;
}

footer {
	background:#ff99cc;
}
footer p {
	margin:0;
	padding:10px;
}