css - html テーブル 枠線 色 - 残りの画面スペースの高さを埋めるdivを作る

html table 枠線 / html / html-table

Webアプリケーションで、コンテンツを画面全体の高さに合わせて表示したいと考えています。

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

#tdcontent {
    height: 100%;
}

#content {
    overflow: auto; / *またはオーバーフロー:非表示; * /
}
<table id="page">
    <tr>
        <td id="tdheader">
            <div id="header">...</div>
        </td>
    </tr>
    <tr>
        <td id="tdcontent">
            <div id="content">...</div>
        </td>
    </tr>
</table>

danronmoon



Answer #1
html,
body {
  height: 100%;
}

header {
  height: 100px;
  background: grey;
}

section {
  height: calc(100% - (100px + 150px));
  / * 100pxのヘッダーと150pxのフッターを追加します* /
  background: tomato;
}

footer {
  height: 150px;
  background-color: blue;
}
<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>