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

我为网站创建了此布局

<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）上有一个滚动条，左列高度为100％。有可能吗？我该怎么办？谢谢

编辑。

这是我的心

最佳答案

这有一些问题。

标头不需要向左浮动。看起来不错。如果有的话，添加一个显示块。使用浮点数时，仅将需要在另一个元素旁边的项目向左/向右移动。

#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不需要负的margin-left。添加了我提到的修复程序后，它可以舒适地放置在其中。

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

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

最后但并非最不重要的一点，我的（更新的）JSFiddle：http://jsfiddle.net/Az2ws/2/