Firefox 100% 高度和自动滚动 div 问题
Posted
技术标签:
【中文标题】Firefox 100% 高度和自动滚动 div 问题【英文标题】：Firefox 100% height and auto scrolling div problems 【发布时间】：2013-11-16 19:46:13 【问题描述】：我希望创建一个包含页眉、页脚和三个内容列的页面。外侧的两列应该是固定宽度，中间的列应该占据剩余的宽度。
页眉和页脚应该是百分比宽度，中间的三列应该占据剩余空间。如果三列不合适，它们应该自动滚动。
fiddle http://jsfiddle.net/BBVZ9/ 在 IE 和 Chrome 中运行良好，但 firefox 会滚动整个页面。
我认为问题出在 display:table-cell 上，但我找不到更好的方法来容纳独立的滚动列和填充中间列。
关于如何解决这个问题的任何想法？我更喜欢 css 解决方案，但我可以容纳任何 js 想法。
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
html,body
height: 100%;
width: 100%;
margin:0;
padding:0;
#header
height: 10%;
background: gray;
#footer
height: 10%;
background: gray;
#content
height: 80%;
width: 100%;
background: yellow;
display: table;
#left0
display: table-cell;
height: 100%;
#right0
display: table-cell;
width: 200px;
height: 100%;
#nav0
display: table-cell;
width: 300px;
height: 100%;
#left
background: red;
height: 100%;
overflow: auto;
#right
background: blue;
height: 100%;
overflow: auto;
#nav
height: 100%;
</style>
<script type='text/javascript'>//<![CDATA[
window.onload=function()
//]]>
</script>
</head>
<body>
<div id="header">
HEADER
</div>
<div id="content">
<div id="nav0">
<div id="nav">
Left
</div>
</div>
<div id="left0">
<div id="left">
Middle
</div>
</div>
<div id="right0">
<div id="right">
Right
</div></div>
</div>
<div id="footer">
FOOTER
</div>
</body>
</html>
【问题讨论】：
【参考方案1】：找到js解决方案
function fixHeight()
hnum = window.innerHeight *.8;
h = hnum.toString();
document.getElementById("left0").style.height=h+"px";
document.getElementById("nav0").style.height=h+"px";
document.getElementById("right0").style.height=h+"px";
window.addEventListener('resize', fixHeight);
【讨论】：
【参考方案2】：我认为我没有做对，但我认为您的问题可以通过以下方式解决：
::-moz-滚动条 宽度：12px； ::-moz-滚动条轨道 -moz-box-shadow: 插图 0 0 6px #fff); 背景：#000; ::-moz-滚动条-拇指 边框半径：10px； -moz-box-shadow: 插图 0 0 6px #fff; 背景：#7A252B； *我帮助过...
【讨论】：
对这与问题有什么关系感到困惑。以上是关于Firefox 100% 高度和自动滚动 div 问题的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Firefox 中制作包含 div 的 iframe 100% 高度？