有两个孩子的父 div。即使没有显示另一个孩子，也总是让一个孩子填充父母？

Posted 2023-02-23

【中文标题】有两个孩子的父 div。即使没有显示另一个孩子，也总是让一个孩子填充父母？

【英文标题】：Parent div with two children. Always make one child fill the parent even when other child is not displayed?

【发布时间】：2016-02-19 00:15:43

【问题描述】：

我有一个包含两个孩子的父 div。不会总是显示其中一个孩子。如何让另一个孩子 div 填充父母的高度而不溢出？

我的第一个不总是显示的孩子有一个固定的高度。我尝试让第二个孩子的高度为 100%，如果第一个孩子没有显示，但当它是第二个孩子时溢出。

这是我的问题：

.parent 
    height: 400px;
    width: 400px;
    background: red;
    border: 1px solid black;


.child1 
    height: 30px;
    background: green;


.child2 
    height: 100%;
    background: blue;

http://jsfiddle.net/4fdf8ksy/

【参考方案1】：

您可以使用flexbox layout。

只需将.parent 元素的display 设置为flex 并添加flex-direction: column：

Updated Example

.parent 
  height: 400px;
  width: 400px;
  background: red;
  border: 1px solid black;
  display: flex;
  flex-direction: column;

.child1 
  height: 30px;
  background: green;

.child2 
  height: 100%;
  background: blue;

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

【参考方案2】：

您可以使用vh 代替%。这意味着高度应该是100%查看帖子设备。

Jsfiddle

.parent 
  height: 400px;
  width: 400px;
  background: red;
  border: 1px solid black;
  display: block;

.child1 
  height: 30px;
  background: green;
  display: none;

.child2 
  height: 100vh;
  background: blue;

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>