如何使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

您可以使用显示 table 和 table-cell 属性，并放弃浮动：

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

Answer 2

您可以使用 display: table 作为父项。在这里使用 table 布局没有错，因为它是 table，对吧？

.parent {
    display: table;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    border: 1px solid #000;
}

查看工作 fiddle：http://jsfiddle.net/gcam9gcj/4/

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

How to make 3 divs fill height of parent container

html

css