私は、スクロール可能な本体を持つヘッダー、フッター、およびテーブルからなるページを持っています。スクロール可能なテーブル本体が使用可能な画面の高さを占有する方法
私はすべてのコンテンツが正確に100vhを取るようにしようとしています。
は、これまでのところ、私はこのjsfiddleを持っているが、私は避けたいテーブル本体の高さは、定義している：利用可能な残りのスペースに基づいてサイズを変更する
https://jsfiddle.net/134asedk/3/
は私が得ることができるテーブル本体をCSSのみを使用していますか？私はflexboxを使用しないことを好むでしょうが、フレックスボックスが最善の方法であると思われる場合はフォールバックを使用できます。
[編集]私はIE10をサポートする必要があるので、以下のような大きな答えの中に示唆されているように、calcは使用できません。
私はこれが簡単であるべきだと感じますが、私は頭を傷つけています。
cssからfullbody要素の応答の高さを得ることはできませんが、偽の回避策が見つかるだけです。
しかし、あなたがしたい場合は、ウィンドウの幅とウィンドウの高さを取ることができますし、JavaScriptであなたのテーブルにそれらを設定する！
できるだけ多くの応答するには、ウィンドウ上でこれを行うことができます^^あまりにフッターとヘッダーとテーブルの高さの両方を調整するよう効果的にそうheightを計算するためのCSSの
使用calc()機能のサイズを変更します。ここで
tbody {
display: block;
width: 100%;
height: calc(100vh - 200px);
overflow-y: scroll;
}
は.table-wrapper上jsFiddle
使用height: calc(100% - 140px); overflow-y: scroll;です。 140pxは答えてくれてありがとう高さ+ .header-wrapperのトップ/ボトムのパディングと.footer-wrapper
* {
padding: 0;
margin: 0;
}
.main-wrapper {
height: 100vh;
overflow: hidden;
}
.header-wrapper, .footer-wrapper {
padding: 10px 5px;
height: 50px;
}
table {
width: 100%;
}
tr {
width: 100%;
display: table;
table-layout: fixed;
}
th, td {
width: 33%;
padding: 5px;
text-aligh: left;
}
span {
float: left;
}
/*tbody {
display: block;
width: 100%;
height: 300px;
overflow-y: scroll;
}*/
.table-wrapper {
height: calc(100% - 100px);
overflow-y: scroll;
}<div class="main-wrapper">
<div class="header-wrapper">
<h1>The Header</h1>
</div>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>
<span>Table Head1</span>
</th>
<th>
<span>Table Head 2</span>
</th>
<th>
<span>Table Head 3</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="footer-wrapper">
<h1>The footer</h1>
</div>
</div>答えをありがとう！私はIE10をサポートしていますが、calcがサポートされていないことがわかりました。 IE10のサポートを含むように質問を更新します。 –
です！私はIE10をサポートしていますが、calcがサポートされていないことがわかりました。 IE10のサポートを含むように質問を更新します。 –