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

【问题标题】：How to stretch div height to fill parent div - CSS如何拉伸 div 高度以填充父 div - CSS
【发布时间】：2025-12-25 06:05:12
【问题描述】：

我有一个带有如下 div 的页面

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

样式为;

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;
}

请看下面的布局/截图；

我想调整 div B2 的高度以填充（或拉伸到）整个 div B（标有绿色边框）并且不想越过页脚 div D。这是一个工作小提琴@ 987654322@（更新）。我该如何解决这个问题？？

【问题讨论】：

标签： html css

【解决方案1】：

只需将height: 100%; 添加到#B2 样式。 min-height 应该不是必需的。

【讨论】：

如果 dif 为空，它将是。
错误答案 #B2 将与 #B 一样高，但不会按要求拉伸以填充剩余空间
这是否不适用于具有不同 float 的 div 然后它是父级？
它覆盖了 B1 并占据了所有空间；/
这显然行不通，height:100% 是容器的 100%（我认为最常见的是整个视口）——它的高度会超出预期。

【解决方案2】：

假设你有

<body>
  <div id="root" />
</body>

使用普通 CSS，您可以执行以下操作。查看正在运行的应用程序https://github.com/onmyway133/Lyrics/blob/master/index.html

#root {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

使用 flexbox，你可以

html, body {
  height: 100%
}
body {
  display: flex;
  align-items: stretch;
}

#root {
  width: 100%
}

【讨论】：

我刚刚意识到如果您将height: 100% 添加到#root，这将不再有效。有人可以解释一下吗？

【解决方案3】：

http://jsfiddle.net/QWDxr/1/

使用“最小高度”属性
小心填充、边距和边框:)

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;
}

【讨论】：

no.. 它用上边距填充整个页面。我只想填写特定的 div B
它在 chrome 和 firefox 中正常工作。如果这对您不起作用，您可以使用Faux Columns
它有效，但它正在剪切页脚div id= D。我不希望它跨越 div d
height:100% 缺少 #B2 样式的分号。
在自定义导航栏中为我工作。

【解决方案4】：

如果您打算使用 B2 进行样式设置，您可以试试这个“hack”

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

jsFiddle

【讨论】：

这行得通，谢谢。顺便说一句，应该是margin-bottom: -9999px;。你错过了减号。

【解决方案5】：

适合我的目的是创建一个始终以固定数量限制在整个浏览器窗口内的 div。

至少在 Firefox 上有效的是这个

<div style="position: absolute; top: 127px; left: 75px;right: 75px; bottom: 50px;">

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

希望这可以节省一些时间。

【讨论】：

【解决方案6】：

B2 容器相对位置

顶部位置 B2 + 剩余高度

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

【讨论】：

将父节点设置为相对位置解决了我不相关的问题！谢谢！

【解决方案7】：

如果你使用的是 JQuery，你可以这样做：

<body onload="$('nav').height($('main').height());">

【讨论】：