html - 获取具有背景的 div 以拉伸(stretch)到父 div 的底部

Question

我在另一个 div 中有两个 div——一个有背景色，另一个只有白色。

我一直在努力找出能够让它们都拉伸(stretch)到外部 div 的底部，具体取决于哪个最长，而不在左侧 div 上留下空白或切断背景或其中之一的内容。我总是最终切断左边的 div。

在元素中，两个 div 都是动态的，可以是空的也可以是很长的。当菜单比右侧的内容长时，我想在左侧页面底部显示纯色。同样，当内容比菜单短时，我不希望有任何内容被截断。

我已经为我遇到的问题创建了一个 jsfiddle 示例: http://jsfiddle.net/nKATZ/

如果菜单比正文短，它看起来是正确的:http://jsfiddle.net/nKATZ/1/

代码如下:

html

<div class="mainBox">
<div class="leftBox">
    <a href="#">here</a><br />
    <a>here</a><br />
    <a>here</a><br /><a>here</a><br />
    <a>here</a><br />
    <a>here</a><br />
    <a>here</a><br />
    <a>here</a><br />
    <a>here</a><br />
    <a>here</a><br />
</div>
<div class="rightBox">
    body textbody text<br />
    body textbody text<br />
    body textbody text<br />
    body textbody text<br />
    body textbody text<br />
    body textbody text<br />
    body textbody text<br />
    body textbody text<br />
    body textbody text<br />
    body textbody text<br />
    body textbody text<br />
    body textbody text<br />
    body textbody text<br />
    body textbody text<br />
    body textbody text<br />
</div>
<div class="clear" ></div>
</div>

CSS

body {
    background: #15384C;
    font-family: 'Dosis', sans-serif;
}
.mainBox {
    margin-right: auto;
    margin-left: auto;
    width: 960px; 
    background: white;
    position: relative;
    padding: 0px;
    overflow: vissable;
}
.leftBox {
    float: left;
    width: 200px;
    background-color: #CF4A41;
}
.rightBox {
    width:720px; 
    float: right;
}
.clear {
    clear:both;
}

Answer 1

试试这个:

body {
    background: #15384C;
    font-family: 'Dosis', sans-serif;
}
.mainBox {
    margin-right: auto;
    margin-left: auto;
    width: 960px; 
    background: white;
    position: relative;
    padding: 0px;
    overflow: hidden;

}
.leftBox {
    float: left;
    width: 200px;
    background-color: #CF4A41;
    margin-bottom: -2000px;
    padding-bottom: 2000px; 
}
.rightBox {
    width:720px; 
    float: right;
}
.clear {
    clear:both;
}