我希望我的页面有一个固定的header和footer，它必须始终保持在屏幕上。横向面板位于aside上，主要内容位于section内。
使用JavaScript，我设法保持aside占用所有剩余高度（window.height - header.height - footer.height）。但它只适用于section不太高的情况。当我调整窗口大小时，我可以看到footer正在消失在窗口的底部边缘下方，为section留出空间。
我尝试了很多不同的overflow-y组合（在section里面，在div里面，两者都有），但无济于事。我该如何解决？
我做了jsfiddle example。
function resize() {
var hPage = window.innerHeight;
var hHead = document.getElementById('header').offsetHeight;
var hFoot = document.getElementById('footer').offsetHeight;
document.getElementById('spn').innerHTML = 'Page: ' + hPage + '<BR>Head: ' + hHead + '<BR>Foot: ' + hFoot;
document.getElementById('aside').style.height = (hPage - hHead - hFoot) + 'px';
}html,
body {
height: 100%;
margin: 0;
overflow-x: hidden;
overflow-y: hidden;
}
header {
background-color: green;
color: white;
text-align: center;
font-weight: bold;
font-size: 30px;
}
section {
float: right;
width: 80%;
overflow-x: auto;
overflow-y: auto;
}
section div {
padding: 10px;
overflow-x: auto;
overflow-y: auto;
}
aside {
float: left;
background-color: lightgreen;
width: 20%;
}
aside p {
margin-left: 20px;
}
footer {
background-color: green;
color: white;
text-align: center;
clear: both;
}
table {
border-collapse: collapse;
}
th {
border: 1px solid black;
text-align: center;
font-weight: bold;
}
td {
border: 1px solid black;
text-align: center;
}<body onload='resize()' onresize='resize()'>
<header id='header'>Test 0.1</header>
<aside id='aside'>
<p>Menu 1</p>
<p>Menu 2</p>
<p>Menu 3</p>
<p>Menu 4</p>
<p><span id='spn'>n</span>
</p>
</aside>
<section>
<div id='divMain'>
<table>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
</section>
<footer id='footer'>Address,
<br>phone,
<br>etc.
<br>
<br>Address,
<br>phone,
<br>etc.</footer>
</body>
答案 0 :(得分：2)
尝试使用flexbox方法，不需要javascript。添加了<main>元素包裹<aside>和<section>。
<强> jsFiddle
html,
body {
height: 100%;
}
body {
margin: 0;
display: flex;
flex-direction: column;
}
header {
background-color: green;
color: white;
text-align: center;
font-weight: bold;
font-size: 30px;
}
main {
flex: 1;
display: flex;
min-height: 0;
}
aside {
background-color: lightgreen;
width: 20%;
overflow: auto;
}
aside p {
margin-left: 20px;
}
section {
width: 80%;
overflow: auto;
}
section div {
padding: 10px;
}
footer {
background-color: green;
color: white;
text-align: center;
}
table {
border-collapse: collapse;
}
th {
border: 1px solid black;
text-align: center;
font-weight: bold;
}
td {
border: 1px solid black;
text-align: center;
}<header id='header'>
Test 0.1
</header>
<main>
<aside id='aside'>
<p>Menu 1</p>
<p>Menu 2</p>
<p>Menu 3</p>
<p>Menu 4</p>
<p><span id='spn'>n</span>
</p>
</aside>
<section>
<div id='divMain'>
<table>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
</section>
</main>
<footer id='footer'>
Address,
<br>phone,
<br>etc.
<br>
<br>Address,
<br>phone,
<br>etc.
<br>
</footer>
答案 1 :(得分：0)
您可以将position:fixed应用于页脚＆amp;还要显示表格，如果它的高度溢出，你需要添加滚动选项。
这是一个可以帮助你的CSS
#footer{
position:fixed;
bottom:0;
width:100%
}
#divMain{
overflow-y:auto; // scrollbar will only appear when require
height:500px; // you can adjust this height
}
答案 2 :(得分：0)
如果您想让header和footer拥有固定的位置，那么您应该使用position:fixed属性。
以下是fiddle