html - 如何使3个div填充父容器的高度

Question

我在一个父容器中有 3 个 div(所有这些都有动态内容)。我需要它们全部填充父容器的高度，以便它们的大小都相等。

我创建了一个 jsfiddle 以简单的方式概述我的问题。

.parent {
  overflow: hidden;
  position: relative;
  border: 1px solid #000;
}

.parent div {
  height: 100%;
}

.left {
  float: left;
  width: 33%;
}

.right {
  float: right;
  width: 33%;
}

.center {
  display: inline-block;
  width: 34%;
}

.one {
  background-color: #fcc;
}

.two {
  background-color: #cfc;
}

.three {
  background-color: #ccf;
}

<div class="parent">
  <div class="one left">
    One Line
  </div>
  <div class="two center">
    Two Lines<br/> Two Lines
  </div>
  <div class="three right">
    Three Lines<br/> Three Lines<br/> Three Lines
  </div>
</div>

Answer 1

您可以使用显示表格和表格单元格属性并放弃 float 来做到这一点:

.parent {
    display: table;
    width:100%;
    position: relative;
    border: 1px solid #000;
}
.left {
    width: 33%;
}
.right {
    width: 33%;
}
.center {
    width: 34%;
}
.one {
    background-color: #fcc;
}
.two {
    background-color: #cfc;
}
.three {
    background-color: #ccf;
}
.one, .two, .three {
    display:table-cell;
}

<div class="parent">
    <div class="one left">One Line</div>
    <div class="two center">Two Lines
        <br/>Two Lines</div>
    <div class="three right">Three Lines
        <br/>Three Lines
        <br/>Three Lines</div>
</div>

2019 使用 flexbox 更新

#flexbox_container {
  display: flex;
  border: 1px solid #000;
}

.one {
  background-color: #fcc;
}

.two {
  background-color: #cfc;
}

.three {
  background-color: #ccf;
}
.one, .two, .three {
  flex-grow:1;
}

<div id="flexbox_container">
  <div class="one">
    One Line</div>
  <div class="two" style="">Two Lines
    <br/>Two Lines</div>
  <div class="three" style="">Three Lines
    <br/>Three Lines
    <br/>Three Lines</div>
</div>