Question

我正在寻找一个包含页眉，页脚和三个内容列的页面。两个外侧列应固定宽度，中间列应占用剩余宽度。

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

小提琴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>

Answer 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);

Answer 2

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


    ::-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;
    }*

我帮助过......

Firefox 100％高度和自动滚动div问题

2 个答案: