html - 如何让我的菜单 div 充满全高而不滚动，但有一个滚动的内容 div

Question

我有这个 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:

“菜单”div 必须从页眉填充到页脚，不能滚动

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

他们需要什么样的 CSS 代码才能让它成为现实？

Answer 1

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

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

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