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

Question

我有以下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：400pxdiv1a：100pxdiv1b：100像素div1c：50px

因此底部有150px的空白处。 （400-100-100-50 = 150）。如何使用CSS解决div1c的高度达到div1底部的问题？

如果我对div1c执行height:100%，则它的高度为div1，即400px。

谢谢！

Answer 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/

Answer 2

这里有一些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/

Answer 3

这是我想出的[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，我会做些不同。

Answer 4

简单的解决方法是用div设置父级overflow:hidden和用div设置子级height:100%

添加以下属性：

---

对于div1

position:fixed

---

对于div1c

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

---

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

Answer 5

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

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