Question

我已尝试overflow并使用clear: both;，但我不能让孩子的div高度相等，我不希望高度是静态的。有人可以帮助我实现这个目标吗？

以下fiddle显示了问题。

Answer 1

由于您似乎有静态宽度，但您不想要静态高度，可以通过将容器div设置为position: relative;然后再留下一个div来修复它，并绝对定位其他div。类似于 jsFiddle 。

一个浮动div将确保container div具有高度，绝对定位的div将自动调整为与浮动div相同的高度。然后，您必须在绝对定位的overflow-y: auto上设置div，以确保如果它们的高度超过浮动div的高度，滚动条将出现在它们内部。这应该适用于所有浏览器。

div.container {
  position: relative;
  width: 800px; // height will be determined by the content of div.left
}
div.left {
  float: left;
  width: 400px; // height will be determined by its content
}
div.middle, div.right {
  position: absolute;  
  overflow-y: auto;
  width: 200px;
  bottom: 0px;  // These two lines will ensure that this div's height
  top: 0px;     // is equal to the height of div.left and div.container
  left: 400px;  // Value should be equal to the width of div.left  
}
div.right {
  left: 600px;  // Value is the sum of the width of div.left and div.middle.
}

PS 如果你想要的是background-color填充整个容器div（如你的帖子标题所示），你可以设置{{1}在容器background-color上。

Answer 2

嗯，没有Javascript实现这一目标的最佳方法是使用css3灵活布局

#newTask .body {
  display: -webkit-flex;
  -webkit-flex-direction: row;
}

这样的东西，但是你正在使用的浏览器的前缀。

Answer 3

您可以在display: table;上使用#newtask .body，然后在其所有子div（左，中，右）上使用display: table-cell;。

这会使它表现得像一个表，并确保所有div的大小相等。

#newtask .body {
 display: table;
}

#newtask .body > div {
 display: table-cell;
 height:100%;
}

小提琴：http://jsfiddle.net/mv46q/1/

Div高度和背景颜色

3 个答案: