我有这个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代码是什么让它变得真实?

感谢

有帮助吗?

解决方案

我已经尝试了答案,但结果并不令人满意,所以最后我为我做了更好的解决方案:

http://jsfiddle.net/cvdet/

其他提示

很久以前我有这样的问题,希望这将有助于

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

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top