Question

我希望在网站中间有一个容器div。它有固定的宽度和最小高度。在这个容器（ContentWrapper）里面有两个div--一个用于内容（左），一个用于side-info（右）。但是当左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 height

谢谢

Answer 1

Flexbox可以做到这一点。

＆＃13;

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

＆＃13;

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

＆＃13;

Codepen Demo

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

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

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

3 个答案: