コンテンツを画面全体の高さいっぱいに表示したい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>ページの高さ全体が埋められ、スクロールする必要はありません。
コンテンツdiv内のすべてについて、設定top: 0;するとヘッダーのすぐ下に配置されます。コンテンツは、高さが100％に設定された実際のテーブルになる場合があります。header中に入れるcontentと、これは機能しません。
を使用せずに同じ効果を達成する方法はありtableますか？
アップデート：
コンテンツ内の要素のdiv高さもパーセンテージに設定されます。したがって、100％内側の何かdivがそれを底まで埋めます。50％の2つの要素もそうです。
アップデート2：
たとえば、ヘッダーが画面の高さの20％を占める場合、内部の50％で指定されたテーブル#contentは、画面スペースの40％を占めます。これまでのところ、機能するのはテーブル全体をラップすることだけです。
