将两个浮动<div>设置为相同的高度</div>

Question

所以我再次与css定位斗争。

几分钟前，我发现浮动元素不会影响其父容器的高度。那么当我说这个高度是动态的时候，如何设置两个浮动到相同高度的div's？

拨弄

http://jsfiddle.net/qbaJ8/

如何将青色<div>的高度设置为与动态填充绿色高度相同的高度？

Answer 1

添加此css：

html, body {
   height: 100%;
}

.start-page-wrapper {
    height: 100%;
}

.first-section {
    height: 100%;
}

Updated jsfiddle

修改

或者，您可以将display: table用于父元素，将display: table-cell代替float: left用于子元素。它不适用于IE7。 jsfiddle

Answer 2

试试这个：

http://alistapart.com/article/fauxcolumns

或者说，我认为有一些不同的可能性来完成这项工作

http://www.vanseodesign.com/css/equal-height-columns/

Answer 3

你可以试试这段代码：

  

http://jsfiddle.net/qbaJ8/

or 

  

http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/   这对我有用