Firefox 100% 高度和自动滚动 div 问题答案

【问题标题】：Firefox 100% height and auto scrolling div problemsFirefox 100% 高度和自动滚动 div 问题
【发布时间】：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>

【问题讨论】：

标签： css firefox scroll height

【解决方案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； }*

我帮助过...

【讨论】：

对这与问题有什么关系感到困惑。