Question

我遇到一个问题。在主要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％的线

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

Answer 1

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

在div框内将分隔符设置为100％

1 个答案: