我有一个 CSS 布局，其中内容 div 具有绝对定位，以便能够在溢出时滚动内容。此内容 div 位于相对 div 中，因为上方元素的高度可能不同(由其内容决定)。
但是，我的解决方案仅适用于 Chrome 和 IE9，内容 div 在 Firefox 中不显示滚动条。不幸的是，我的解决方案也不适用于旧版浏览器。您知道更好的布局来完成上述要求吗？
编辑:
布局应该填充视口(viewport) 100% 宽度和 100% 高度，这就是为什么我可能需要使用表格(如果我错了请纠正我)。另外，我更喜欢没有 javascript 的解决方案，因为我有其他可以操纵内容的 javascript。
我当前的代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Test</title>
<style type="text/css">
html, body, form { width:100%; height:100%; margin:0; overflow:hidden; }
</style>
</head>
<body>
<table style="width: 100%; height: 100%;">
<tr>
<td style="height: 120px; border: 1px solid #000;">
Top: always same height
</td>
</tr>
<tr style="height: 20px; background-color: Red;">
<td>
Variable height: could push the next row down
</td>
</tr>
<tr style="position: relative; overflow: auto;">
<td style="position: relative; background-color: White; vertical-align: top; overflow: scroll;">
<div style="position: relative;">
<div style="position: absolute; bottom: 0; top: 0; left: 0; right: 0; ">
Content with variable height: needs overflow auto/scroll
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
最佳答案
我不知道如何只用 css 来实现它，但我可以让它与 javascript 一起工作。
HTML(内部正文):
<div id='top'>
top - fixed height
</div>
<div id='middle'>
middle - some content and stuff
</div>
<div id='bottom'>
bottom - this content should scroll<br/>
text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>
text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>
text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>
</div>
CSS:
body{
margin:0;
padding:0;
}
#top{
width:100%;
height:100px;
background:#ccf;
}
#middle{
float:left;
width:100%;
background:#cfc;
}
#bottom{
width:100%;
background:#fcc;
clear:both;
overflow:scroll;
position:fixed;
bottom:0;
}
JavaScript(放在head中):
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
}
window.onload = function() {
document.getElementById('bottom').style.height = getDocHeight() - (100 + document.getElementById('middle').offsetHeight) + "px";
}
window.onresize=window.onload;
getDocHeight() 函数来自这里:http://james.padolsey.com/javascript/get-document-height-cross-browser/
关于html - 下推相对div内的绝对溢出div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6756282/