[解決済み】divの高さを画面の残りスペースで埋めるようにする

質問

Webアプリケーションの制作で、画面全体の高さいっぱいにコンテンツを表示させたいのですが、どうすればよいですか？

ページにはヘッダーがあり、ロゴとアカウント情報が含まれています。これは任意の高さにすることができます。コンテンツ div が、ページの残りの部分を底まで埋めるようにしたいのです。

ヘッダーがある div とコンテンツ div . 今のところ、このようにテーブルを使ってレイアウトしています。

CSSとHTML

#page {
    height: 100%; width: 100%
}

#tdcontent {
    height: 100%;
}

#content {
    overflow: auto; /* or overflow: hidden; */
}

<table id="page">
    <tr>
        <td id="tdheader">
            <div id="header">...</div>
        </td>
    </tr>
    <tr>
        <td id="tdcontent">
            <div id="content">...</div>
        </td>
    </tr>
</table>

ページ全体の高さが満たされ、スクロールが不要になります。

コンテンツディブの中にあるものについては top: 0; は、ヘッダーのすぐ下に配置されます。時には、コンテンツの高さが100%に設定された本物のテーブルになることもあります。配置 header 内部 content を使用すると、これが動作しなくなります。

を使用せずに、同じ効果を得る方法はありますか？ table ?

更新しました。

コンテンツ内の要素 div は、高さもパーセンテージで設定されます。そのため div は底まで埋まります。50%の2つの要素も同様です。

アップデート2:

例えば、ヘッダーが画面の高さの20％を占めている場合、50％で指定したテーブルが #content は、画面の40％のスペースを占めます。今のところ、全体をテーブルで包むのが唯一の方法です。

解決方法は？

2015年最新版：フレックスボックスのアプローチ

他にも簡単に2つの回答があります。 フレックスボックス しかし、それは2年以上前のことであり、例も示されていません。フレックスボックスの仕様は、現在では確実に固まっています。

CSS Flexible Boxes Layout仕様はCandidate Recommendationの段階ですが、すべてのブラウザが実装しているわけではありません。WebKit の実装には -webkit- の接頭辞が必要です。Internet Explorer は古いバージョンの仕様を実装しており、-ms- の接頭辞が付きます。最新の互換性状況は、各プロパティの互換性テーブルを参照してください。

(から引用 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes )

すべての主要なブラウザと IE11+ が Flexbox に対応しています。IE10 以前のブラウザでは、FlexieJS の shim を使用できます。

現在の対応状況を確認するには、こちらもご覧ください。 http://caniuse.com/#feat=flexbox

動作例

フレックスボックスを使用すると、行や列の寸法を固定、コンテンツ サイズ、余白の寸法のいずれかに簡単に切り替えることができます。この例では、ヘッダーをコンテンツにスナップするように設定し（OP の質問による）、フッターを追加して固定高さの領域を追加する方法を示し、コンテンツ領域が残りのスペースを埋めるように設定しています。

html,
body {
  height: 100%;
  margin: 0;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}

<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

上記のCSSでは フレックス プロパティは フレックスグロウ , フレックスシュリンク そして フレックスベース プロパティを使用して、フレックスアイテムの柔軟性を設定することができます。Mozilla は フレキシブルボックスモデルの良い紹介 .