如何将子div高度扩展为父级的高度

Question

我的页面结构为：

<div class="parent">
   <div class="child">
   </div>
   <div class="child">
   </div>
   <div class="child">
   </div> 
</div>

我想将.child的高度设置为等于.parent的高度（已知），但不要将子项定位为绝对值。因此，结果将是一个孩子的列表，这些孩子本身就像父母一样高。

Answer 1

您可以设置父亲的身高，然后将每个孩子的身高设置为100％，并且每个孩子的身高都与父亲相同，即使这会扩展父亲。

＆＃13;

＆＃13;

.parent
.child:nth-child(1) {background-color: #f00;}
.child:nth-child(2) {background-color: #0f0;}
.child:nth-child(3) {background-color: #00f;}

.parent {
  height: 100px;
  background-color: red;
}

.child {
  height: 100%;
}

＆＃13;

<div class="parent">
   <div class="child">
   </div>
   <div class="child">
   </div>
   <div class="child">
   </div> 
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以尝试使用table-layout或flex-box，这会让所有孩子都同样高：

.parent {border: 2px solid #ccf; height: 300px;}
.child:nth-child(1) {background-color: #f99;}
.child:nth-child(2) {background-color: #9f9;}
.child:nth-child(3) {background-color: #99f;}

.parent {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
}
.parent .child {
  width: 33.3333%;
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}

<div class="parent">
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div> 
</div>

预览

Answer 3

您可以使用inherit属性继承父元素的heigtht。 Inherit将始终与设置此属性的第一个元素具有相同的值。 例如：

＆＃13;

＆＃13;

.parent{
  height: 200px;
  width: 600px;
  display: flex;
}


.child1{
  height: inherit;
  width: 25%;
  background-color: green;
}

.child2{
  height: inherit;
    width: 25%;
    background-color: purple;
}

.child3{
  height: inherit;
    width: 25%;
    background-color: blue;
}

.child4{
  height: inherit;
    width: 25%;
    background-color: red;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

可以使用CSS Flexbox为父div提供子元素高度。

<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div> 
</div>

.parent{
display:flex;
}