html - 与另一个 div 共享容器时，是否有一个 div 来填充容器的剩余高度/宽度？

Question

假设我有以下设置：

<div class="A parent">
    <div class="A a1"></div>
    <div class="A a2"></div>
    <div class="A a3"></div>
</div>

CSS：

.A {
    width: 100%;
}

.parent {
    height: 300px;
    width: 300px
}

.a1 {
    height: 100px;
 }

.a2 {
    height: 100px;
}

.a3 {
    // ??
}

有什么方法可以.a3填写父 div 的剩余高度，没有任何内容，也没有明确说明它的高度？这对于响应式设计非常有用。

Answer 1

在这种情况下，由于您对父容器有一个硬编码的高度，您可以将高度设置.a3为 100%：

CSS

.parent {
  overflow: hidden; /** This will hide the overflow **/
  height: 300px;
  width: 300px
}

.a3 {
  background: blue;
  height: 100%;
}

代码笔示例。

使用 Flexbox 解决方案进行更新

使用flexbox并定义 a flex-directionof column，您可以让您的列有机地假设基于父容器的高度。

CSS

.parent {
  display: flex; /** Set display type **/
  flex-direction: column; /** Flexbox direction **/
  flex-wrap: nowrap; /** Each row should take up 100% of the width **/
  height: 300px;
  width: 300px;
}


.a1, .a2, .a3 {
  flex-grow: 1; /** 1 per row **/
}

.a1 { background: green; } /** No more explicit heights, if you want **/
.a2 { background: red; }
.a3 { background: blue; }

Answer 2

这是一个简单的方法。由于您知道父元素和前两个子元素的高度，因此可以对第三个子块使用绝对定位：

.A {
    width: 100%;
}
.parent {
    height: 300px;
    width: 300px;
    position: relative;
}
.a1 {
    height: 100px;
    background-color: pink;
}
.a2 {
    height: 100px;
    background-color: beige;
}
.a3 {
    background-color: yellow;
    position: absolute;
    top: 200px;
    bottom: 0;
}

见演示：http: //jsfiddle.net/audetwebdesign/WbRZn/

这使用 CSS2，所以它应该是向后兼容的，可能回到 IE5。

Answer 3

根据您想要的外观，您始终可以使用 包裹前两个盒子.a3，然后设置height: 100%为a3。

Answer 4

以防万一OP对@kunalbhat的回答的第一条评论是一个重要的要求

如果其中一个元素，比如中间那个，没有明确的高度，而是从其内容中获取高度怎么办？

你可以像display: table;这样使用display: table-row;：

CSS：

.A {
    width: 100%;
}
.parent {
    height: 200px;
    width: 300px;
    position: relative;
    display: table;
}
.a1 {
    background-color: pink;
}
.a2 {
    background-color: beige;
}
.a3 {
    background-color: yellow;
    height: 100%;
    display: table-row;
}

这是一个jsFiddle，这应该适用于 IE8+ 和所有其他浏览器。