質問
このHTML構造があります
<div id="header">
…
</div>
<div id="menu">
...
</div>
<div id="content">
...
</div>
<div id="footer">
...
</div>
そしてCSS:
#header {
height: 100px;
}
#footer {
border: 1px solid #989898;
padding-bottom: 0.1em;
width: 100%;
height: 2.2em;
position: fixed;
bottom: 0px;
left: 0px;
}
#menu {
width: 150px;
float: left;
???
}
#content {
???
}
ヘッダーとフッターは問題ありませんが、問題はメニューとコンテンツの div にあります。
「menu」 div はスクロールせずにヘッダーからフッターまで埋める必要があります
「コンテンツ」は必要に応じてスクロールを表示する必要があります。
どの CSS コードを使えばそれが現実になるでしょうか?
ありがとう
解決
私はあなたの答えを試しましたが、結果は満足のいくものではないので、ついに私のためにより良い解決策を作りました:
他のヒント
私はずっと前にそのような問題を抱えていました、これが役立つことを願っています
HTML
<div id="wrapper">
<div id="header">
...
</div>
<div id="menu">
...
</div>
<div id="content">
...
</div>
<div id="footer">
...
</div>
</div>
CSS
#wrapper
{
position: relative;
...
...
}
#header
{
position: absolute;
top: 0;
left: 0;
height: 100px;
}
#footer
{
position: absolute;
bottom: 0;
height: XXXpx;
display: block;
}
#menu
{
position: absolute;
top: 110px;
left: 0;
bottom: 0;
width: 150px;
height: 100%;
display: block;
}
#content
{
position: absolute;
top: 110px;
left: 160px;
width: XXXpx;
display: block;
}
私のアプローチは、このように自分自身のラッパーで「メニュー」と「コンテンツ」を包みます。
<div id='contentWrapper'>
<div id="menu">
....
</div>
<div id="content">
....
</div>
</div>
.
スタイルこんなスタイル:
#contentWrapper {
width: 1000px;
overflow: hidden;
background-color: yellow;
}
#menu {
width: 150px;
float: left;
background-color: transparent;
}
#content {
width: 850px;
float: left;
background-color: white;
}
.
色は説明するためのものです。実際には、メニューは常に同じ高さで、あなたがそれを置くものは何でも伸びるでしょうが、あなたがそれを通して見ることができるので常に「コンテンツ」の高さを取るように見えます。ラッパーからの色 - メニューとコンテンツの両方を伸ばす。
これを試して
#menu {
width: 150px;
height: 100%;
overflow-y: auto;
display: block;
}
所属していません StackOverflow