Html 如何拉伸div高度以填充父div-CSS

我有一个像下面这样的div页面

<div id="container">
    <div id="A"></div>
    <div id="B">
        <div id="B1"></div>
        <div id="B2">B2</div>
    </div>
    <div id="C"></div>
    <div id="D"></div>
</div>

请参见下面的布局/屏幕截图

我想调整div

B2

的高度，以填充（或拉伸）整个div

B

（用绿色边框标记），而不想跨过页脚div D。这是一把工作小提琴（已更新）。我该如何解决这个问题？？

使用“最小高度”属性
小心填充物、边缘和边框：）

---

如果你想用B2做造型，你可以试试这个“黑客”

---

只需添加高度：100%到

#B2

样式上

min height

应该是不必要的。

适合我的目的是创建一个div，该div始终在整个浏览器窗口中以固定的数量进行限制

至少在firefox上起作用的是

只要实际窗口不被强制滚动，div在所有重新调整大小期间都会保留其到窗口边缘的边界

希望这能节省一些时间。

假设你有

使用普通CSS，您可以执行以下操作。查看正在运行的应用程序

#根{
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
}

使用flexbox，您可以

html，正文{
身高：100%
}
身体{
显示器：flex；
对齐项目：拉伸；
}
#根{
宽度：100%
}

B2容器相对位置

剩余高度的顶部位置B2+

---

B2高度+B1高度或剩余高度

no。。它用上页边距填充整个页面。我只想填充特定的div

B

，它在chrome和firefox中正常工作。如果这对您不起作用，您可以使用它，但它正在剪切页脚

div id=D

。我不希望它穿过d区

高度：100%

缺少

#B2

样式的分号。在自定义导航栏中为我工作。它将，如果dif为空。错误答案#B2将与#B一样高，但不会拉伸以填充剩余空间，因为这不适用于具有不同

浮动的div，那么它是父级？它覆盖B1并占用所有空间/这显然不起作用，高度：100%是容器的100%（我认为大多数情况下是整个视口）-它的高度会超出预期。这很有效，谢谢。顺便说一下，它应该是
marginbottom:-9999px。您缺少负号。将父节点设置为相对位置解决了我的无关问题！谢谢我刚刚意识到，如果将
height:100%
添加到#root，这将不再有效。有人能解释一下吗？
html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
#B, #C, #D {
    position: absolute;
}
#A{
    top: 0;
    width: 100%;
    height: 35px;
    background-color: #99CC00;
}
#B {
    top: 35px;
    width: 200px;
    bottom: 35px;
    background-color: #999999;
    z-index:100;
}
#B2 {
    margin-top: -35px;
    bottom: 0;
    background-color: #FFFFFF;
    width: 200px;
    overflow: scroll;
}
#B1 {
    height: 35px;
    width: 35px;
    margin-left: 200px;
    background-color: #CC0066;
}
#C {
    top: 35px;
    left: 200px;
    right: 0;
    bottom: 35px;
    background-color: #CCCCCC;
}
#D {
    bottom: 0;
    width: 100%;
    height: 35px;
    background-color: #3399FF;
}

html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
#B, #C, #D {
    position: absolute;
}
#A{
    top: 0;
    width: 100%;
    height: 35px;
    background-color: #99CC00;
}
#B {
    top: 35px;
    width: 200px;
    bottom: 35px;
    background-color: #999999;
    z-index:100;
}
#B2 {
    min-height: 100%;
    height: 100%;
    margin-top: -35px;
    bottom: 0;
    background-color: red;
    width: 200px;
    overflow: scroll;
}
#B1 {
    height: 35px;
    width: 35px;
    margin-left: 200px;
    background-color: #CC0066;
}
#C {
    top: 35px;
    left: 200px;
    right: 0;
    bottom: 35px;
    background-color: #CCCCCC;
}
#D {
    bottom: 0;
    width: 100%;
    height: 35px;
    background-color: #3399FF;
}

#B { overflow: hidden;}
#B2 {padding-bottom: 9999px; margin-bottom: -9999px}