如何拉伸子div高度以填充具有动态高度的父级?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (29)

我有两个div,包含在一个父div,可以容纳大的div,我的目标是让这子div的高度相等。

http://fiddle.jshell.net/y9bM4/

提问于
用户回答回答于

解决方案是使用display: table-cell内联而不是使用display: inline-blockfloat: left

div#container {
  padding: 20px;
  background: #F1F1F1
}
.content {
  width: 150px;
  background: #ddd;
  padding: 10px;
  display: table-cell;
  vertical-align: top;
}
.text {
  font-family: 12px Tahoma, Geneva, sans-serif;
  color: #555;
}

<div id="container">
  <div class="content">
    <h1>Title 1</h1>

    <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.
      <br>Sample Text. Sample Text. Sample Text.
      <br>Sample Text.
      <br>
    </div>
  </div>
  <div class="content">
    <h1>Title 2</h1>

    <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.</div>
  </div>
</div>
用户回答回答于

使用display: flex伸展div

div#container {
    padding:20px;
    background:#F1F1F1;
    display: flex;
}
.content {
    width:150px;
    background:#ddd;
    padding:10px;
    display:inline-block;
    vertical-align:top;
    margin-left: 10px;
}
.text {
    font-family: 12px Tahoma, Geneva, sans-serif;
    color:#555;
}

扫码关注云+社区

领取腾讯云代金券