1

ヘッダー、フッター、および 3 つのコンテンツ列を含むページを作成しようとしています。外側の 2 つの列は幅を固定し、中央の列は残りの幅を占める必要があります。

ヘッダーとフッターはパーセンテージ幅で、中央の 3 つの列が残りのスペースを占める必要があります。3 つの列が収まらない場合は、自動スクロールする必要があります。

フィドル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

-1

私はそれが正しいとは思いませんが、あなたの問題は次の方法で解決できると思います:

    ::-moz-スクロールバー {
    幅: 12px;
    }
    ::-moz-scrollbar-track {
    -moz-box-shadow: inset 0 0 6px #fff);
    背景:#000;
    }
    ::-moz-scrollbar-thumb {
    ボーダー半径: 10px;
    -moz-box-shadow: inset 0 0 6px #fff;
    背景:#7A252B;
    }*

助かりました…

于 2013-11-05T19:48:21.743 に答える