Html 将分隔器设置为100%在分隔盒内

我有一个问题。在主分区内，我还有3个分区。一个在左边，一个在中间，一个在右边。这是我的wp小部件，这就是为什么我不能使用px来添加分隔高度，因为如果小部件使用的立柱超过分隔高度的设置，那么它将只显示在一半上。我需要的是将这个除数设置为100%。所以，如果主盒是100%（主盒不是由高度设置的），那么分隔器将是相同的100%

这是一个

HTML:

例如，白线是我想要拉伸100%的线

---

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

我认为问题在于分隔符元素具有

浮点：left

，并且它无法继承

的高度，因为元素具有

浮点

。根据该链接中的答案，您可以对这些元素使用

position:absolute

，以解决您的问题

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

#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*/
}