html - div 高度和背景颜色

Question

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

这是显示问题的小提琴。

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（正如你的帖子标题所暗示的那样），你可以background-color在容器上设置div。

Answer 2

好吧，在没有 Javascript 的情况下实现这一目标的最佳方法是使用 css3 灵活布局

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

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

Answer 3

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

这将使其表现得像一个表格，并确保所有 div 的大小相同。

#newtask .body {
 display: table;
}

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

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