使div(高度)占据父级剩余高度

我有一个div带两个孩子的容器。第一个孩子有给定的身高。如何让第二个孩子占据容器的“自由空间” div而不给其指定高度?

在示例中,粉红色div也应占据白色空间。


与此问题类似:如何使div占据剩余高度?

但是我不想摆 。

回答:

可以通过多种方式扩展#down子级以填充剩余的空间,#container具体取决于您希望获得的浏览器支持以及是否#up具有定义的高度。

.container {

width: 100px;

height: 300px;

border: 1px solid red;

float: left;

}

.up {

background: green;

}

.down {

background: pink;

}

.grid.container {

display: grid;

grid-template-rows: 100px;

}

.flexbox.container {

display: flex;

flex-direction: column;

}

.flexbox.container .down {

flex-grow: 1;

}

.calc .up {

height: 100px;

}

.calc .down {

height: calc(100% - 100px);

}

.overflow.container {

overflow: hidden;

}

.overflow .down {

height: 100%;

}

<div class="grid container">

<div class="up">grid

<br />grid

<br />grid

<br />

</div>

<div class="down">grid

<br />grid

<br />grid

<br />

</div>

</div>

<div class="flexbox container">

<div class="up">flexbox

<br />flexbox

<br />flexbox

<br />

</div>

<div class="down">flexbox

<br />flexbox

<br />flexbox

<br />

</div>

</div>

<div class="calc container">

<div class="up">calc

<br />calc

<br />calc

<br />

</div>

<div class="down">calc

<br />calc

<br />calc

<br />

</div>

</div>

<div class="overflow container">

<div class="up">overflow

<br />overflow

<br />overflow

<br />

</div>

<div class="down">overflow

<br />overflow

<br />overflow

<br />

</div>

</div>

CSS的grid布局提供了另一种选择,尽管它可能不如Flexbox模型那么简单。但是,只需要设置容器元素的样式即可:

.container { display: grid; grid-template-rows: 100px }

所述grid-template-rows定义的第一行作为固定100px的高度,并且保持行会自动拉伸以填充剩余的空间。

我非常确定IE11需要-ms-前缀,因此请确保在希望支持的浏览器中验证功能。

现在,CSS3的灵活框布局模块(flexbox)得到了很好的支持,并且可以非常容易地实现。由于它具有灵活性,因此即使在#up没有定义的高度时也可以使用。

#container { display: flex; flex-direction: column; }

#down { flex-grow: 1; }

重要的是要注意,IE10和IE11对某些flexbox属性的支持可能会出现问题,而IE9或更低版本完全不支持。

另一个简单的解决方案是使用CSS3calc功能单元,正如Alvaro在他的回答中指出的那样,但是它要求第一个孩子的身高是一个已知值:

#up { height: 100px; }

#down { height: calc( 100% - 100px ); }

它得到了广泛的支持,唯一值得注意的例外是<= IE8或Safari 5(不支持)和IE9(部分支持)。其他一些问题包括将 calc 与_transform_ 或 box-shadow 结合使用,因此如果您担心此问题,请确保在多个浏览器中进行测试。

如果需要较早的支持,则可以添加height:100%;#down使粉红色div完全高出一个警告。因为#up将其向下推,将导致容器溢出。

因此,您可以添加overflow: hidden;到容器中以解决此问题。

或者,如果的高度#up是固定的,则可以将其绝对放置在容器中,并在上添加padding-top #down

并且,另一个选择是使用表格显示:

#container { width: 300px; height: 300px; border: 1px solid red; display: table;}

#up { background: green; display: table-row; height: 0; }

#down { background: pink; display: table-row;}​

以上是 使div(高度)占据父级剩余高度 的全部内容, 来源链接: utcz.com/qa/397290.html

回到顶部