在与另一个div共享时，是否有一个div来填充容器的剩余高度/宽度？ [英] Have a div to fill out the remaining height/width of a container when sharing it with another div?

问题描述

说我有以下设置：

<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的剩余高度，没有任何内容和而不明确说明其高度？这将对响应式设计非常有用。

Is there any way I can get .a3 to fill out the remaining height of the parent div, without any content and without explicitly stating its height? This would be so useful for responsive design.

推荐答案

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

Here is a simple way of doing it. Since you know your heights of the parent and the first two child elements, you can use absolute positioning for the third child block:

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

查看demo： http://jsfiddle.net/audetwebdesign/WbRZn/

这使用CSS2，因此应该向后兼容，可能回到IE5。

This uses CSS2 so it should be backwards compatible, probably back to IE5.

这篇关于在与另一个div共享时，是否有一个div来填充容器的剩余高度/宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！