コンテンツを画面全体の高さいっぱいにしたいWebアプリケーションに取り組んでいます。
このページには、ロゴを含むヘッダーとアカウント情報があります。これは任意の高さになる可能性があります。content 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>ページの高さ全体が埋められ、スクロールは必要ありません。
content divの内部では、設定top: 0;によりヘッダーのすぐ下に配置されます。コンテンツは、高さが100％に設定された実際のテーブルになる場合があります。header内部contentに置くと、これは機能しません。
を使用せずに同じ効果を達成する方法はありtableますか？
更新：
コンテンツ内の要素のdiv高さもパーセントに設定されます。したがって、内部に100％の何かがあると、divそれが底まで満たされます。2つの要素が50％になります。
アップデート2：
たとえば、ヘッダーが画面の高さの20％を占める場合、内部で50％に指定されたテーブル#contentは画面スペースの40％を占めます。これまでのところ、機能するのはテーブル全体をラップすることだけです。
-私はあなたのセットアップrecereateしようとしましたjsfiddle.net/ceELsを -しかし、そのは動作していない、何が私が逃したのですか？
—
Gill Bates
@氏。エイリアンの答えはシンプルで便利です。http：//stackoverflow.com/a/23323175/188784
—
Gohan
実際には、表を使用しても、説明した内容は機能しません。コンテンツが画面の高さよりも垂直方向のスペースを大きく取ると、表のセルと表全体が画面の下部を超えて拡大します。コンテンツのoverflow：autoはスクロールバーを表示しません。
—
ダミアン2014
あなたがで親要素の外観の高さを指定した後、それが動作します@GillBates jsfiddle.net/ceELs/5を
—
ミハルVašut
display:tableと関連するプロパティを使用して、テーブルマークアップなしで、ほとんどのブラウザで目的のテーブルレイアウトを取得できます。非常に類似した質問に対するこの回答を参照してください。