0
我有一個頁面，帶有標題，一些控件，3個顯示數據的表格和一個頁腳。我希望標題，控件，頁腳和2個表格始終顯示。第三個表我希望它擴展到佔用客戶窗口中的可用高度，並在包含div中顯示一個滾動條（該表中的數據有很多行並且總是需要一個滾動條）。使div在IE和Firefox中佔據可用高度並顯示滾動條
我設法找到a solution（本文中的解決方案2），它的工作原理與我在Google Chrome和Opera上使用display: table;和display:table-row時所需的完全相同。在其他瀏覽器（Firefox，Edge，IE11）中的問題中，包含表格的div會伸展並且不可滾動，並且頁腳將被隱藏。
我創建this fiddle證明我的問題： https://jsfiddle.net/3nts59oL/5/ 代碼：
body,
html {
height: 100%;
padding: 0;
margin: 0;
}
.container {} .fill {
height: 100%;
}
.panel {
display: table;
width: 100%;
}
.panel > div {
display: table-row;
height: 0;
}
.panel > div.fillavailable {
height: auto;
}
.controls {
background-color: red;
}
hr {
background-color: silver;
margin: 0;
height: 2px;
}
.content {
background-color: green;
}
.contentContainer {
width: 100%;
}
.maincontent {
background-color: orange;
overflow-y: scroll;
height: 100%;
}<body>
<div class="panel fill">
<div>
<h1>Title</h1>
</div>
<div class="fillavailable">
<div class="container panel fill">
<div class="controls">
Some buttons and links here.
</div>
<div class="content fillavailable">
<div class="panel fill">
<div>
<table>
<tr>
<td>Some data(typically 2-3 rows)</td>
</tr>
<tr>
<td>Some data(typically 2-3 rows)</td>
</tr>
</table>
<table>
<tr>
<td>More data(typically 1-3 rows)</td>
</tr>
<tr>
<td>More data(typically 1-3 rows)</td>
</tr>
<tr>
<td>More data(typically 1-3 rows)</td>
</tr>
</table>
<hr />
</div>
<div class="fillavailable">
<div class="maincontent fill">
<table>
<tr>
<td>lots of data</td>
</tr>
<tr>
<td>lots of data</td>
</tr>
<tr>
<td>lots of data</td>
</tr>
<tr>
<td>lots of data</td>
</tr>
<tr>
<td>lots of data</td>
</tr>
<tr>
<td>lots of data</td>
</tr>
<tr>
<td>lots of data</td>
</tr>
<tr>
<td>lots of data</td>
</tr>
<tr>
<td>lots of data</td>
</tr>
<tr>
<td>lots of data</td>
</tr>
<tr>
<td>lots of data</td>
</tr>
<tr>
<td>lots of data</td>
</tr>
<tr>
<td>lots of data</td>
</tr>
<tr>
<td>lots of data</td>
</tr>
<tr>
<td>lots of data</td>
</tr>
<tr>
<td>lots of data</td>
</tr>
<tr>
<td>lots of data</td>
</tr>
<tr>
<td>lots of data</td>
</tr>
<tr>
<td>lots of data</td>
</tr>
<tr>
<td>lots of data</td>
</tr>
<tr>
<td>lots of data</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<footer>footer text</footer>
</div>
</div>
</body>綠色的表是固定的，而橙色的表需要根據需要填寫擴大可用的屏幕高度。我如何解決這個代碼在IE10 +，Firefox中的工作？我不在乎IE9或更早的版本。我有一個單獨的移動版本的頁面，但可以在移動設備上正常工作的解決方案是受歡迎的。
另請注意，我不知道設計時的任何元素的高度，這就是爲什麼我沒有去使用position: absolute或css calc的解決方案。
我編輯我原來的問題，包括在崗本身，而不僅僅是一個鏈接的jsfiddle代碼。 –