题
我有这个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 {
???
}
.
页眉和页脚是可以的,但问题来自菜单和内容divs:
'菜单'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