我试图将页面或页面的一部分分成两部分(高度)。 顶部将与其内容高度一样多。 底部将是剩余的可用高度(如果需要可滚动)。
我做到了，而且它工作正常，但是 IE(9) 和 firefox 显示得很糟糕:(
也许我一开始的想法是错误的，也许不需要表格..
<table>
<tr>
<td>
Some Content
</td>
</tr>
<tr>
<td style="height:100%">
<div style="overflow: auto;height: 100%;">
more long content (scrollable)
</div>
</td>
</tr>
</table>
请帮忙。
--编辑:
我知道这个问题有一个简单的 javascript 解决方案，但我正在寻找一个纯 css html 解决方案。
最佳答案
好吧，根据您的代码，我认为可滚动意味着仅在第二个 div 内滚动。如果是这样，您可以使用下面的 CSS 将您的页面水平分成两部分:
html, body {
height: 100%;
min-height: 100%;
padding: 0;
margin: 0;
}
.wrapper{
position:relative;
width: 100%;
height: 100%;
}
.header{
position: relative;
height: auto;
width: 100%;
background-color: lightblue;
}
.body{
position: relative;
width: 100%;
height: 100%;
background-color: lightgreen;
}
然后让你的第二个内容总是填充剩余高度，你可以使用下面的JS:
function resize() {
document.getElementById('body').style.height = '100%';
var height = document.getElementById('body').offsetHeight - document.getElementById('header').offsetHeight;
document.getElementById('body').style.height = height + 'px';
};
window.onresize = function(event) {
resize();
};
window.onload = function(event){
resize();
}
使用以下 HTML:
<body onload="resize()">
<div class="header" id="header">
HEADER
</div>
<div class="body" id="body">
<div style="overflow: auto;height: 100%;">
test<br />
test<br />
//it will be scrollable when the content's height > the parent div
</div>
</div>
</body>
检查这个 Fiddle了解更多信息..
关于HTML 高度分为两部分，一部分是改变高度，一部分是长且可滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28526718/