嵌套的 DIV 并不总是具有相同的高度答案

【问题标题】：Nested DIVs don´t always have the same height嵌套的 DIV 并不总是具有相同的高度
【发布时间】：2016-01-02 07:06:03
【问题描述】：

我希望在站点中间始终有一个容器 div。它具有固定的宽度和最小高度。在这个容器（ContentWrapper）中有两个 div——一个用于内容（左），一个用于侧信息（右）。但是当左侧 div 包含长文本时，右侧应该与左侧具有相同的高度。使用此代码我无法做到这一点：

<div id="ContentWrapper">
    <div id="ContentLeft"></div>
    <div id="ContentRight"></div>
</div>

CSS：

div#ContentWrapper {
background-color:aqua;
position:absolute;
left:50%;
margin-top:100px;
width:1200px;
margin-left:-600px;
min-width:900px;
min-height:500px;
}

div#ContentLeft{
width:70%;
height:100%; 
background-color:#f1f1f1;
float:left;
border-radius:5px 0px 0px 5px;
overflow: visible;
}

div#ContentRight{
width:30%;
height:100%; 
background-color:#dfdfdf;
float:left;
border-radius:0px 5px 5px 0px;
}

关键属性：

ContentLeft 的最小高度

ContentWrapper 的固定宽度

ContentLeft 必须遵循其包含高度

ContentRight 必须遵循 ContainLefts 高度

谢谢

【问题讨论】：

标签： html css web-applications

【解决方案1】：

Flexbox 可以做到这一点。

div#ContentWrapper {
  background-color: aqua;
  position: absolute;
  left: 50%;
  width: 1200px;
  top: 100px;
  margin-left: -600px;
  display: flex;
  border: 1px solid green;
}
div#ContentLeft {
  flex: 0 0 70%;
  min-height: 500px;
  background-color: green;
  border-radius: 5px 0px 0px 5px;
}
div#ContentRight {
  flex: 0 0 30%;
  background-color: red;
  border-radius: 0px 5px 5px 0px;
}

<div id="ContentWrapper">
  <div id="ContentLeft"></div>
  <div id="ContentRight"></div>
</div>

Codepen Demo

【讨论】：

到目前为止，这似乎是要走的路。我不知道 display:flex;非常感谢
这可以解决 ContentLeft 上的填充问题吗？当我设置 padding:5px; ContentLeft 变大。是否可以设置填充并保持 DIV 尺寸不变？
当然你只需要将 box-sizing 属性设置为border-bottom。

【解决方案2】：

如果我理解正确，您基本上希望 div1 和 div2 并排以相同的高度结束，而不管内容如何。你有几个选择。

1) 设置div和overflow-y:scroll或overflow-y:hidden的高度

2) 使用<table>s

3) 使用 CSS 并设置 display:table display:table-row display:table-cell -- 注意这将在 IE7 及以下版本中失败

4) 我刚想到这个.. 你也可以使用JavaScript 来检测更大的div 并将兄弟div 的div 高度设置为相等。理论上——我从来没有测试过。

【讨论】：

无滚动，div 必须与内容一起拉伸，但嵌套 div 必须保持一些最小高度

【解决方案3】：

你可以使用 display: table;对于父 div，并显示：table-cell；对于两个子 div，还要删除 float: left; 这是调整后的css，为了方便测试，我删除了一些属性

div#ContentWrapper {
background-color:aqua;
position:absolute;
margin-top:100px;
width:200px;
min-width:300px;
min-height:10px;
display: table;
}

div#ContentLeft{
width:70%;
height:100%; 
background-color:#f1f1f1;
border-radius:5px 0px 0px 5px;
overflow: visible;
display: table-cell;
}

div#ContentRight{
width:30%;
height:100%; 
background-color:#dfdfdf;
border-radius:0px 5px 5px 0px;
display: table-cell;
}

【讨论】：