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

Question

我想要一个容器 div 始终位于站点中间。它具有固定的宽度和最小高度。在这个容器 (ContentWrapper) 中有两个 divs - 一个用于内容（左），一个用于辅助信息（右）。但是当左边 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 高度

谢谢

Answer 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

Answer 2

如果我没理解错的话，您基本上希望 div1 和 div2 side-by-side 无论内容如何都以相同的高度结束。你有几个选择。

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 高度设置为等于。理论上——我从未测试过。

Answer 3

您可以使用显示：table；对于 parent div，并显示：table-cell；对于两个 child divs，也删除 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;
}

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

Nested DIVs don´t always have the same height

html

css

web-applications