Html 最后一个DIV填充父DIV高度的剩余部分（无JS或绝对位置）

我希望div C填充父div A的剩余高度，同时允许兄弟div B具有可调整的高度。仅使用CSS（无javascript）就可以做到这一点吗

其他类似问题的答案是“positiondiv C绝对”，但这对我来说并不适用，因为我希望div B根据其内容具有可变的高度

+---------------------------------------+
| D +---------------------------------+ |
| i | div B (min and variable height) | |
| v +=================================| |
|   |               ^                 | |
| A |               |                 | |
|   |              div C              | |
|   |      (remainder of height)      | |
|   |               |                 | |
|   |               v                 | |
|   +---------------------------------+ |
+---------------------------------------+

---

这可能对您不可行（只有非常现代的浏览器才能实现它），但值得一提的是，flexiblebox模型旨在解决此类问题。例如（）：

HTML:

编辑：进一步阅读此处：

您可以通过“伪造”一张

表格来完成此操作，而无需使用表格

只需设置一个
div
结构来模拟表的
tr，td
结构，并设置CSS来将
div
s显示为
表


（单击包含内容的div以添加更多内容，它会显示可变高度）
如果将顶部div设置为float:left和width:100%，会怎么样

我试着在JSFIDLE中测试它，它似乎很有效

代码是。
这是另一种方法。

参考资料：

这个函数不浮动div，而是使用一个
#divWrapper
来处理内部的
#divTop
和
#divBottom
需求

HTML:

<div id="divContent">

    <div id="divWrapper">

      <div id="divTop">
        <p>This is random webpage content for div B. <br />
           This is random webpage content for div B. <br />
           This is random webpage content for div B. <br />
           This is random webpage content for div B. <br />        
           The 'background-color' aqua is the size of this div B. <br />
            <b>Note CSS 'min-height' is optionally used for this div. </b>
        </p>
      </div>

      <div id="divBottom">
        <p>The remainder of the space is used by div C. Line 01 <br />
           The remainder of the space is used by div C. Line 02 <br />
           The remainder of the space is used by div C. Line 03 <br />
           The remainder of the space is used by div C. Line 04 <br />
           The remainder of the space is used by div C. Line 05 <br />
           The remainder of the space is used by div C. Line 06 <br />
           The remainder of the space is used by div C. Line 07 <br />
           The remainder of the space is used by div C. Line 08 <br />
           Since this div is secondary, contents may clip. Line 09 <br />
           The remainder of the space is used by div C. Line 10 <br />
           The remainder of the space is used by div C. Line 11 <br />
           The remainder of the space is used by div C. Line 12 <br />
           The remainder of the space is used by div C. Line 13 <br />
           The remainder of the space is used by div C. Line 14 <br />
          </p>
      </div>

    </div>

</div>

#divContent {
    background-color: yellow;
    border: 3px solid red;
    width:400px;
    height: 400px;
}

#divWrapper {
    height: 90%;
    width: 90%;
    top: 5%;
    left: 5%;
    position: relative;
    border: 1px solid black;
    overflow: hidden;
}

#divTop {
    background-color: aqua;
    min-height: 155px;          /* Optional minimum height setting */
}

#divBottom {
    background-color: pink;
    width: 100%;
}


#divTop:hover, #divBottom:hover {
    background-color: white;
}

不使用js不行，因为它需要计算div B的最小内容量是多少？有了这些信息，你能为C区设置一个
min height
来填满剩余的空间吗？你是说设置
height
而不是
min height
？如果我给
一种
display:block
的样式，那么div的表容器似乎可以工作，但是使用表来完成布局在语义上似乎是不正确的，对吧？我忘了提到灵活的box模型有一个javascript垫片。我猜它会影响性能，但它确实存在：设置不错。起初我也有类似的想法。实际上，我正在用谷歌图表填充divBottom（或divc），它将其高度设置为锚定div的当前高度。因此，我无法使用内容来扩展高度。另外，我需要所有divBottom都可见（无
溢出：隐藏）。感谢您的反馈。然而，+1是一个很好的问题。干杯没有评论的否决票。我不再来这里的一个原因是这实际上不起作用，如果你把你的#b框的颜色注释掉，你可以看到#c仍然填充着整个背景。还有一个关于
$（'a'）.height（）
和
$（'c'）.height（）
的快速javascript警报显示两者是相同的。。。
<div id="divContent">

    <div id="divWrapper">

      <div id="divTop">
        <p>This is random webpage content for div B. <br />
           This is random webpage content for div B. <br />
           This is random webpage content for div B. <br />
           This is random webpage content for div B. <br />        
           The 'background-color' aqua is the size of this div B. <br />
            <b>Note CSS 'min-height' is optionally used for this div. </b>
        </p>
      </div>

      <div id="divBottom">
        <p>The remainder of the space is used by div C. Line 01 <br />
           The remainder of the space is used by div C. Line 02 <br />
           The remainder of the space is used by div C. Line 03 <br />
           The remainder of the space is used by div C. Line 04 <br />
           The remainder of the space is used by div C. Line 05 <br />
           The remainder of the space is used by div C. Line 06 <br />
           The remainder of the space is used by div C. Line 07 <br />
           The remainder of the space is used by div C. Line 08 <br />
           Since this div is secondary, contents may clip. Line 09 <br />
           The remainder of the space is used by div C. Line 10 <br />
           The remainder of the space is used by div C. Line 11 <br />
           The remainder of the space is used by div C. Line 12 <br />
           The remainder of the space is used by div C. Line 13 <br />
           The remainder of the space is used by div C. Line 14 <br />
          </p>
      </div>

    </div>

</div>

#divContent {
    background-color: yellow;
    border: 3px solid red;
    width:400px;
    height: 400px;
}

#divWrapper {
    height: 90%;
    width: 90%;
    top: 5%;
    left: 5%;
    position: relative;
    border: 1px solid black;
    overflow: hidden;
}

#divTop {
    background-color: aqua;
    min-height: 155px;          /* Optional minimum height setting */
}

#divBottom {
    background-color: pink;
    width: 100%;
}


#divTop:hover, #divBottom:hover {
    background-color: white;
}