Css Firefox 100%高度和自动滚动div问题_Css_Firefox_Scroll_Height

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

css firefox scroll

Css Firefox 100%高度和自动滚动div问题,css,firefox,scroll,height,Css,Firefox,Scroll,Height,我希望创建一个包含页眉、页脚和三个内容列的页面。两个外侧立柱应为固定宽度，中间立柱应占据剩余宽度页眉和页脚应为百分比宽度，中间的三列应占据剩余空间。如果这三列不适合，它们应该自动滚动小提琴在IE和Chrome中工作得很好，但firefox会滚动整个页面我认为问题在于显示：表格单元格，但我还没有找到更好的方法来容纳独立的滚动列和填充中间列关于如何解决这个问题有什么想法吗？我更喜欢css解决方案，但我可以容纳任何js想法 <!DOCTYPE html> <html>

我希望创建一个包含页眉、页脚和三个内容列的页面。两个外侧立柱应为固定宽度，中间立柱应占据剩余宽度

页眉和页脚应为百分比宽度，中间的三列应占据剩余空间。如果这三列不适合，它们应该自动滚动

小提琴在IE和Chrome中工作得很好，但firefox会滚动整个页面

我认为问题在于显示：表格单元格，但我还没有找到更好的方法来容纳独立的滚动列和填充中间列

关于如何解决这个问题有什么想法吗？我更喜欢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>

我不认为我做对了，但我认为你的问题可以通过以下方式解决：

::-moz-scrollbar { width: 12px; } ::-moz-scrollbar-track { -moz-box-shadow: inset 0 0 6px #fff); background:#000; } ::-moz-scrollbar-thumb { border-radius: 10px; -moz-box-shadow: inset 0 0 6px #fff; background:#7A252B; }* 我已经帮助…

找到了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);

我不知道这和这个问题有什么关系。