子高度 div 扩展到父 div 的底部答案

【问题标题】：child height div expand to bottom of parent div子高度 div 扩展到父 div 的底部
【发布时间】：2020-01-09 21:44:31
【问题描述】：

我有以下html：

<div class="div1">
    <div class="div1a"></div>
    <div class="div1b"></div>
    <div class="div1c"></div>
</div>

这里是布局链接：http://jsfiddle.net/7ZGaG/5/

我只需要给 div1 指定高度。

div1a 和 div1b 具有固定的高度。（其实div1也有固定高度）
div1c 需要展开到 div1 的底部。

例如：

div1：400 像素
div1a：100 像素
div1b：100px
div1c：50 像素

所以底部有 150px 的空白处。（400 - 100 - 100 - 50 = 150）。如何使用 div1c 的高度到 div1 底部的 css 来解决这个问题？

如果我为 div1c 做height:100%，那么它需要 div1 的高度，也就是 400px。

谢谢！

【问题讨论】：

如果你试试 height:auto;对于 div1c
@Rohan 然后取自身的高度（50px）
由于某种原因你不能将div1c的高度设置为200px？ div1 的高度会改变吗？
@Zach 我认为你不太了解我。我无法设置。因为 div1 应该是动态的（400px 不是固定的）。它可以不同。那么 div1c 应该总是展开到父 div 的底部（所以 div1c 也不能是固定值）
@Ozkan，我的错！这些高度是用 JavaScript 动态设置的吗？

标签： javascript css html height

【解决方案1】：

.div1 { height: 400px; }
.div1a { 
    float: left;
    width: 100%;
    height: 100px;
    clear: both; }
.div1b { 
    float: left;
    width: 100%;
    height: 100px;    
    clear: both; }
.div1c { height: 100%; }

查看工作示例：http://jsfiddle.net/Wexcode/ENaqK/

【讨论】：

嗯，这到底是怎么回事？它只是使用浮动的属性。
float left 表示 div 必须在上面的 div 旁边。但是这里我们有所有的 div 垂直
啊，我明白你在说什么。我会说它比 hacky 更聪明 ;)
我尝试添加滚动但它坏了：jsfiddle.net/r8qtp7wu

【解决方案2】：

您可以使用 Flex 布局，然后使用 flex-grow 指示最后一个元素应该增长，而不是使用默认的块布局：

.div1 {
  display: flex;
  flex-direction: column;
}
.div1c {
  flex-grow: 1;
}

【讨论】：

【解决方案3】：

这里有一些 CSS 可以做到这一点。

.div1 是 overflow: hidden 设置为抓取最高 div 的高度。听起来可能是.div1a 或.div1b。 .div1c 是 position: absolute 以便它可以使用 .div1 是一个指南，它会将自己定位在 bottom 之外，并与 top 和 right 一起定位。

.div1 {
    width: 450px;
    position: relative;
    background: wheat;
    overflow: hidden;
}
.div1a {
    float: left;
    width: 150px;
    background: blue;
}
.div1b {
    float: left;
    width: 150px;
    height: 120px;
    background: red;
}
.div1c {
    width: 150px;    
    position: absolute;
    top: 0;
    right: 0;
    bottom: 150px;
    background: pink;
}

还有一个小提琴：http://jsfiddle.net/neilheinrich/7ZGaG/

【讨论】：

嗨@nheinrich。你的布局是不同的。 jsfiddle.net/7ZGaG/5这里你可以看到，也是我的问题。所以粉红色的 div 应该扩展到父 div，但是如何呢？
啊，我以为你要去列。
您可以这样做：jsfiddle.net/neilheinrich/7ZGaG/6。但老实说，这很 hacky。
不不，我不能给 div1c 一个固定的高度。因为 div1（父级）也不应该有固定的高度

【解决方案4】：

这是我的想法 (my jsfiddle)：

.div1 {
    position: relative;
    height: 400px;
    border: 1px solid black;
    overflow: hidden;
}

.div1a {
    height: 100px;
    background-color: yellow;
}

.div1b {
    height: 100px;
    background-color: blue;
}

.div1c {
    position: relative;
    top: 200;
    height: 100%;
    background-color: red;
}

但是，如果我可以访问 JavaScript，我会做一些不同的事情。

【讨论】：

请参阅我的主要帖子以获取我拥有的模板。布局是垂直的，没有浮动

【解决方案5】：

简单的解决方案是将父级div 设置为overflow:hidden，将子级div 设置为height:100%

添加以下属性：

对于div1

position:fixed

对于div1c

overflow:hidden; position:relative; height:100%;

示例代码 - http://jsfiddle.net/7ZGaG/26/

【讨论】：

与问题相关的示例代码会有所帮助（顺便说一句，答案很有趣）。