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：400px
div1a：100px
div1b：100px
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和{{ 1}}。

right

和小提琴：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;
}

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

5 个答案: