在 div 框内将分隔符设置为 100%答案

【问题标题】：Set divider to 100% inside div box在 div 框内将分隔符设置为 100%
【发布时间】：2014-12-07 09:14:24
【问题描述】：

我遇到了一个问题。在主 div 里面我还有 3 个 div。一到左一（分隔线）在中间，一在右侧。这是针对我的 wp 小部件的，这就是为什么我不能使用 px 添加该分隔线高度的原因，因为如果小部件使用的帖子多于分隔线的设置高度，则它只会显示在一半。我需要的是将此分隔线设置为 100% 。因此，如果主框是 100%（主框不是由高度设置的），那么分隔符将是相同的 100%。

这是一个Example

HTML：

<div id="blue_box">
    <div id="left">Foo</div>
    <div id="divider"></div>
    <div id="right">Bar</div>
</div>

CSS：

#divider {
    height:100px;
    width: 5px;
    background-color:white;
    float:left;
    margin:0px;
}
#left {
    position: relative;
    float: left;
    width: 40%;
    margin: 0;
    padding: 0;
    height:400px;
    background-color:red;
}
#right {
    position: relative;
    float: right;
    width: 40%;
    margin: 0;
    padding: 0;
    height:400px;
    background-color:red;
}
#blue_box {
    background-color:blue;
    border-radius: 10px;
    -moz-border-radius:10px;
    -webkit-border-radius: 10px;
    position: relative;
    width: 100%;
    min-width: 400px;
    max-width: 600px;
    padding: 2%;
    height:100%;
    overflow: auto;
    /*needed so that div stretches with child divs*/
}

白线例如是我想拉伸 100% 的那条线

我在这里尝试了很多解决方案，但都不起作用。

【问题讨论】：

标签： html css

【解决方案1】：

我认为问题在于分隔元素具有float: left，并且它不能继承<div id="blue_box"> 的高度，因为具有float 的元素cannot inherit heights from other elements。根据该链接中的答案，您可以在这些元素上使用 position: absolute 以解决您的问题。

【讨论】：