1

我正在寻找一个带有页眉、页脚和三个内容列的页面。两个外列应固定宽度，中心列应占用剩余宽度。

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

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

2 回答 2

0

找到了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);
于 2013-11-06T13:59:26.857 回答
-1

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

    ::-moz-滚动条 {
    宽度：12px；
    }
    ::-moz-滚动条轨道 {
    -moz-box-shadow: 插图 0 0 6px #fff);
    背景：#000;
    }
    ::-moz-滚动条-拇指{
    边框半径：10px；
    -moz-box-shadow: 插图 0 0 6px #fff;
    背景：#7A252B；
    }*

我已经帮助...

于 2013-11-05T19:48:21.743 回答