我在桌子里面有一张桌子。我希望内部表格将剩余空间填充到屏幕底部。如果表格中的行太多，无法全部容纳在屏幕上，则我希望表格具有垂直滚动条。整个页面不应具有垂直滚动条。
我能够向元素添加id或类，但是一般HTML尽可能保持相同。
https://jsfiddle.net/4rv9htau/2/
前一段时间，我使用了100％的高度和一个固定的像素值来说明其他元素的额外高度，但是我想避免这种情况，这样我就不必担心在其他元素的大小发生变化时就进行更改将来。
html,
body,
table,
tbody,
tr {
height: 100%;
margin: 0;
}
.MainCell {
display: block;
}
table div:last-child {
max-height: 250px;
overflow-x: hidden;
overflow-y: auto;
}
html,
body {
background-color: red;
}
table {
background-color: blue;
}
table td div:first-child {
background-color: green;
}
table td div:last-child,
table table {
background-color: yellow;
}<table>
<tbody>
<tr>
<td class="MainCell">
<div>
<input type="submit" name="btnBack" value="Back" id="btnBack">
<input type="submit" name="btnDelete" value="Delete" id="btnDelete">
<input type="submit" name="btnCut" value="Cut" id="btnCut">
</div>
<div>
<table style="border-collapse:collapse;">
<thead>
<tr>
<th>COL #1</th>
<th>COL #2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some val #1</td>
<td>Some val #1</td>
</tr>
<tr>
<td>Some val #2</td>
<td>Some val #2</td>
</tr>
<tr>
<td>Some val #3</td>
<td>Some val #3</td>
</tr>
<tr>
<td>Some val #4</td>
<td>Some val #4</td>
</tr>
<tr>
<td>Some val #5</td>
<td>Some val #5</td>
</tr>
<tr>
<td>Some val #6</td>
<td>Some val #6</td>
</tr>
<tr>
<td>Some val #7</td>
<td>Some val #7</td>
</tr>
<tr>
<td>Some val #8</td>
<td>Some val #8</td>
</tr>
<tr>
<td>Some val #9</td>
<td>Some val #9</td>
</tr>
<tr>
<td>Some val #10</td>
<td>Some val #10</td>
</tr>
<tr>
<td>Some val #1</td>
<td>Some val #1</td>
</tr>
<tr>
<td>Some val #2</td>
<td>Some val #2</td>
</tr>
<tr>
<td>Some val #3</td>
<td>Some val #3</td>
</tr>
<tr>
<td>Some val #4</td>
<td>Some val #4</td>
</tr>
<tr>
<td>Some val #5</td>
<td>Some val #5</td>
</tr>
<tr>
<td>Some val #6</td>
<td>Some val #6</td>
</tr>
<tr>
<td>Some val #7</td>
<td>Some val #7</td>
</tr>
<tr>
<td>Some val #8</td>
<td>Some val #8</td>
</tr>
<tr>
<td>Some val #9</td>
<td>Some val #9</td>
</tr>
<tr>
<td>Some val #10</td>
<td>Some val #10</td>
</tr>
<tr>
<td>Some val #1</td>
<td>Some val #1</td>
</tr>
<tr>
<td>Some val #2</td>
<td>Some val #2</td>
</tr>
<tr>
<td>Some val #3</td>
<td>Some val #3</td>
</tr>
<tr>
<td>Some val #4</td>
<td>Some val #4</td>
</tr>
<tr>
<td>Some val #5</td>
<td>Some val #5</td>
</tr>
<tr>
<td>Some val #6</td>
<td>Some val #6</td>
</tr>
<tr>
<td>Some val #7</td>
<td>Some val #7</td>
</tr>
<tr>
<td>Some val #8</td>
<td>Some val #8</td>
</tr>
<tr>
<td>Some val #9</td>
<td>Some val #9</td>
</tr>
<tr>
<td>Some val #10</td>
<td>Some val #10</td>
</tr>
<tr>
<td>Some val #1</td>
<td>Some val #1</td>
</tr>
<tr>
<td>Some val #2</td>
<td>Some val #2</td>
</tr>
<tr>
<td>Some val #3</td>
<td>Some val #3</td>
</tr>
<tr>
<td>Some val #4</td>
<td>Some val #4</td>
</tr>
<tr>
<td>Some val #5</td>
<td>Some val #5</td>
</tr>
<tr>
<td>Some val #6</td>
<td>Some val #6</td>
</tr>
<tr>
<td>Some val #7</td>
<td>Some val #7</td>
</tr>
<tr>
<td>Some val #8</td>
<td>Some val #8</td>
</tr>
<tr>
<td>Some val #9</td>
<td>Some val #9</td>
</tr>
<tr>
<td>Some val #10</td>
<td>Some val #10</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
答案 0 :(得分：1)
使用vh。
<td>
<div>...</div><!-- First div -->
<div>...</div><!-- Second div -->
</td>
calc(100vh - fixed height)。
html,
body,
table,
tbody,
tr {
height: 100%;
margin: 0;
}
html,
body {
background-color: red;
}
table {
border-collapse: collapse;
}
.MainCell {
display: block;
padding: 0;
}
.MainCell>div:first-child {
/* Center the inputs inside the div horizontally and vertically with */
display: flex;
justify-content: center;
align-items: center;
height: 30px;
margin: 0;
padding: 0;
}
.MainCell>div:nth-child(2) {
max-height: calc(100vh - 30px);
}
table div:last-child {
max-height: 250px;
overflow-x: hidden;
overflow-y: auto;
}
table {
//background-color: blue;
}
table td div:first-child {
background-color: green;
}
table td div:last-child,
table table {
background-color: yellow;
}<table>
<tbody>
<tr>
<td class="MainCell">
<div>
<input type="submit" name="btnBack" value="Back" id="btnBack">
<input type="submit" name="btnDelete" value="Delete" id="btnDelete">
<input type="submit" name="btnCut" value="Cut" id="btnCut">
</div>
<div>
<table style="border-collapse:collapse;">
<thead>
<tr>
<th>COL #1</th>
<th>COL #2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some val #1</td>
<td>Some val #1</td>
</tr>
<tr>
<td>Some val #2</td>
<td>Some val #2</td>
</tr>
<tr>
<td>Some val #3</td>
<td>Some val #3</td>
</tr>
<tr>
<td>Some val #4</td>
<td>Some val #4</td>
</tr>
<tr>
<td>Some val #5</td>
<td>Some val #5</td>
</tr>
<tr>
<td>Some val #6</td>
<td>Some val #6</td>
</tr>
<tr>
<td>Some val #7</td>
<td>Some val #7</td>
</tr>
<tr>
<td>Some val #8</td>
<td>Some val #8</td>
</tr>
<tr>
<td>Some val #9</td>
<td>Some val #9</td>
</tr>
<tr>
<td>Some val #10</td>
<td>Some val #10</td>
</tr>
<tr>
<td>Some val #1</td>
<td>Some val #1</td>
</tr>
<tr>
<td>Some val #2</td>
<td>Some val #2</td>
</tr>
<tr>
<td>Some val #3</td>
<td>Some val #3</td>
</tr>
<tr>
<td>Some val #4</td>
<td>Some val #4</td>
</tr>
<tr>
<td>Some val #5</td>
<td>Some val #5</td>
</tr>
<tr>
<td>Some val #6</td>
<td>Some val #6</td>
</tr>
<tr>
<td>Some val #7</td>
<td>Some val #7</td>
</tr>
<tr>
<td>Some val #8</td>
<td>Some val #8</td>
</tr>
<tr>
<td>Some val #9</td>
<td>Some val #9</td>
</tr>
<tr>
<td>Some val #10</td>
<td>Some val #10</td>
</tr>
<tr>
<td>Some val #1</td>
<td>Some val #1</td>
</tr>
<tr>
<td>Some val #2</td>
<td>Some val #2</td>
</tr>
<tr>
<td>Some val #3</td>
<td>Some val #3</td>
</tr>
<tr>
<td>Some val #4</td>
<td>Some val #4</td>
</tr>
<tr>
<td>Some val #5</td>
<td>Some val #5</td>
</tr>
<tr>
<td>Some val #6</td>
<td>Some val #6</td>
</tr>
<tr>
<td>Some val #7</td>
<td>Some val #7</td>
</tr>
<tr>
<td>Some val #8</td>
<td>Some val #8</td>
</tr>
<tr>
<td>Some val #9</td>
<td>Some val #9</td>
</tr>
<tr>
<td>Some val #10</td>
<td>Some val #10</td>
</tr>
<tr>
<td>Some val #1</td>
<td>Some val #1</td>
</tr>
<tr>
<td>Some val #2</td>
<td>Some val #2</td>
</tr>
<tr>
<td>Some val #3</td>
<td>Some val #3</td>
</tr>
<tr>
<td>Some val #4</td>
<td>Some val #4</td>
</tr>
<tr>
<td>Some val #5</td>
<td>Some val #5</td>
</tr>
<tr>
<td>Some val #6</td>
<td>Some val #6</td>
</tr>
<tr>
<td>Some val #7</td>
<td>Some val #7</td>
</tr>
<tr>
<td>Some val #8</td>
<td>Some val #8</td>
</tr>
<tr>
<td>Some val #9</td>
<td>Some val #9</td>
</tr>
<tr>
<td>Some val #10</td>
<td>Some val #10</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
修改
设置.MainCell { padding: 0 }和table { border-collapse: collapse}可以防止整个页面上出现垂直滚动条。