Html 获取要拉伸到父div底部的背景div

我在另一个div中有两个div，一个是背景色，另一个是白色

我一直想弄清楚，是否能够让它们都延伸到外分区的底部，这取决于哪个分区最长，而不会在左分区上留下空白或切断其中一个分区的背景或内容。最后我总是把左边的那一截剪掉

在这个项目中，两个div都是动态的，可以是空的，也可以是很长的。当菜单比右边的内容长时，我想在左边的页面底部显示纯色。同样，当内容比菜单短时，我不希望任何东西被切断

我已经创建了一个我遇到的问题的JSFIDLE示例：

如果菜单比正文短，则看起来正确：

代码如下：

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>

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

试试这个：

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

---

我想这两条线可以解决你的问题

.leftBox {
    float: left;
    width: 200px;
    background-color: #CF4A41;
    height: 100%; /* add this line */
    position: absolute;  /* and this line */
}

---

所以您希望白色部分一直到物理窗口的底部，而不考虑内容，对吗？我想做的是让页面左侧以各种方式填充垂直空间（红色部分），但不要被截断（参见左下角的文本）虽然红色框下没有任何白色区域，但抱歉仍然无法解决问题，只会使主框位于页面底部@贾斯汀现在我想我更了解你了，我改变了解决方案。这是你想要的吗？主要的变化是左框的位置应该是相对的。请看，当我在小提琴中测试时，它工作得很好，但当菜单比内容短时，它仍然显示左框下的空白（红色框没有延伸到主框的底部），但如果菜单更长，它工作得很好。（例如，它不会进入底部）感谢您的帮助，UtapiaLtd会提供更多我需要帮助的照片吗？或者我可以做些什么来尝试更好地解释？对不起，我无法更好地解释。下面是一个我尝试做的例子，它做了我想要的一切，它只使用jquery使其工作。我觉得应该有一种方法可以不用javascri来完成这项工作如果你不喜欢这样做的话，左边和右边都可以比另一边短，而不会破坏页面的外观。另一种解决方案是只制作一个大约一到两个像素高的背景图像，并在你喜欢的地方将列的颜色分开，然后将其设置为.mainbox的背景，但这并不适用于x菜单（红色框）内容比右侧多的问题