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

Question

我在父容器中有3个div（所有这些都有动态内容）。我需要它们来填充父容器的高度，以便它们都是相同的大小。

我已经创建了一个 jsfiddle 来简单地概述我的问题。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以使用display table和table-cell属性来做，并且放弃浮点数：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

2019使用flexbox更新

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以将display: table用于父级。这里使用表格布局没有错，因为它是一张桌子，对吗？

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

查看工作小提琴：http://jsfiddle.net/gcam9gcj/4/