html - 具有流动内容滚动条的布局

Question

我为我的网站创建了这个布局

<div id="wrapper">
    <div id="header">
        <p>HEADER</p>
    </div>
    <div id="contentliquid">
        <div id="content">
            <p>CONTENT</p>
        </div>
    </div>
    <div id="leftcolumn">
        <p>MENU</p>
    </div>
    <div id="footer">
        <p>FOOTER</p>
    </div>
</div>

CSS

body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 13px;
 color:#333
}

p {
 padding: 10px;
}

#wrapper {
 width: 100%;
 min-width: 1000px;
 max-width: 2000px;
 margin: 0 auto;
}

#header {
 float: left;
 height: 25px;
 width: 100%;
 background: #FF6633;
}

#contentliquid {
 float: left;
 width: 100%;
}

#content {
 background: #FFFFFF;
 margin-left: 200px;
}

#leftcolumn {
 float: left;
 background: #CC33FF;
 width: 200px;
 height: 100px;
 margin-left: -100%;
}

#footer {
 height: 40px;
 width: 100%;
 background: #33FF66;
 clear: both;
}

JSFiddle

我的目标是只在流动内容 (contentliquid) 上有一个滚动条，并且 leftcolumn 高度为 100%。有可能吗？我怎么能这样做？谢谢

编辑。

这是我的哥们

Answer 1

这有一些问题。

标题不需要向左浮动。看起来不错。如果有的话，添加一个显示 block 。使用 float 时，仅将需要位于另一个元素旁边的元素向左/向右移动。

#header {
    float: left; // Remove This
    height: 25px;
    width: 100%;
    background: #FF6633;
}

因为#leftcolumn 向左浮动并且在您的设计中位于左侧。 #contentliquid 应该向右浮动，因为这是左/右列基础。我这样说是因为在您的 html 中，#left 列位于#contentliquid 之后。在编写 html 时，您应该首先看到的任何内容都排在第一位。您按照要显示的内容的顺序编写 html。

<div id="contentliquid">
    <div id="content">
    <p>CONTENT</p>
    </div>
</div>
<div id="leftcolumn">  // This element should come before #contentliquid
    <p>MENU</p>
</div>

#contentliquid 占据了 100% 的宽度，这意味着它占据了整个屏幕。这是错误的。这两个元素的总和应该等于 100%，因为 120% 不存在，除了屏幕外。这意味着#leftcolumn 应该是 20% 而 #contentliquid 应该是 80%。 (或您认为合适的任何百分比。

#contentliquid {
    float: left;
    width: 100%; //bad : see below
}

<--------------------------------No Room For Anything Else----------------------->
<-----20----><------------------------------80----------------------------------->

#leftcolumn 不需要负边距。添加我提到的修复后，它很适合它所在的位置。

最后。让 div 保持相同的高度，但滚动内容。在其上设置所需的高度，但将溢出设置为自动/滚动。两者都可以。如果页面上的内容超过为其提供的空间，它将滚动。

#contentliquid {
    float: right;
    width: 80%;
    height: 200px;
    overflow: auto;
}

最后但同样重要的是，我的(更新的)JSFiddle:http://jsfiddle.net/Az2ws/2/