スタイルシートで画面を上下に分割，高さを上部はpxで指定，下部は残り全部にする方法

https://oshiete.goo.ne.jp/qa/2413519.html
上記ページの「※1 FirefoxやOperaではOK」という方法：

#Header {
  height:100px;
  background-color:#cfc;
}
#Content {
  position:absolute;
  top:100px;
  left:0;
  right:0;
  bottom:0;
  overflow:auto;
  background-color:#ccc;
}

でできることは確認したのですが、何しろ10年前の記事ですので、今でもこれがいいやり方なのでしょうか？それとももっといい方法があるのでしょうか？

ご回答とこちらの比較表を元に、最新のプロパティを使って書いたものがこうなりました：
http://liginc.co.jp/web/html-css/css/21024#a14

block.html
1<!DOCTYPE HTML>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8">
5	<title>block style</title>
6	<link rel="stylesheet" href="block.css" />
7</head>
8<body>
9	<div id="container">
10		<header>header</header>
11		<article>
12			<div id="article_inner">
13			article
14			</div>
15		</article>
16	</div>
17</body>
18</html>

block.css
1html,body {
2	height: 100%;
3	padding: 0;
4	margin: 0;
5}
6
7#container {
8	display: flex;
9	flex-direction: column;
10	height: 100%;
11	max-height: 100%;
12	width: 100%;
13}
14
15header {
16	width: 100%;
17	height: 32px;
18	background-color: #fcc;
19}
20
21article {
22	width: 100%;
23	flex: 1;
24	overflow: auto;
25	position: relative;
26	background-color: #ccf;
27}
28
29#article_inner {
30	position: absolute;
31	width: 100%;
32	height: 100%;
33}

行動規範の内容に同意します

回答1件

ベストアンサー

シンプルなルールセットなのでbody要素の余白を0にし忘れたり#Headerや#Contentのpaddingプロパティを指定し忘れたりしなければそちらで特に問題はないと思いますが、もっと良い方法なのかどうかはともかくとしてFlexible Box Layout Moduleを利用したこのような方法もあります。

CSSだけで画面を縦に分割する方法 - 流され日記

なお、リンク先にあるルールセット内のフレキシブルボックスのプロパティは古い仕様のものなので注意してください。

投稿2016/04/21 15:40

flat

総合スコア617

vc3000

2016/04/22 02:37

ありがとうございます。プロパティが古い仕様のものということですので、新しい仕様で書き換えたものを質問に追記しました。

flat

2016/04/22 03:35 編集

ばっちりですね :) ちなみに言う必要はないかもしれませんが、古い環境に対応しなければいけない場合には古い仕様のプロパティも追加する必要があるので注意してください。現状、IE10以下はサポートも終了してシェアも3%未満(日本統計)、AndroidブラウザはAndroid版Chromeへの移行などが進んでシェア5%未満(日本統計)、iOSも8未満は約5%(apple公式発表)とそれぞれのシェアは小さいですが、合わせるとまだ10%を超えるのでもうしばらくは対応しておいた方が良さそうに思えます。

行動規範の内容に同意します