css 布局问题（关于列）答案

【问题标题】：css layout question (about columns)css 布局问题（关于列）
【发布时间】：2011-03-30 10:29:14
【问题描述】：

我有这个 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 必须从页眉填充到页脚，不能滚动

'content' 必须在必要时显示滚动。

什么 CSS 代码能让它们变成现实？

谢谢

【问题讨论】：

标签： html css two-columns

【解决方案1】：

我试过你的答案，但结果并不令人满意，所以最后我为我制定了更好的解决方案：

http://jsfiddle.net/cVdeT/

【讨论】：

【解决方案2】：

很久以前就遇到过这样的问题，希望对你有帮助

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

【讨论】：

【解决方案3】：

我的方法是将“菜单”和“内容”包装在自己的包装器中，如下所示：

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

颜色是用来说明的。实际上，菜单的高度仍然与以往相同，并且会围绕您放入的任何内容展开，但它似乎总是占据“内容”的全部高度，因为您可以看穿它，并且它占据了它的背景包装器的颜色 - 围绕菜单和内容延伸。

【讨论】：

【解决方案4】：

试试这个

#menu { width: 150px; height: 100%; overflow-y: auto; display: block; }

【讨论】：