CSS / XHTML: Left floating DIVs with equal heights when height is set to 100%
I have a few floating div elements that are floating left. They all have a height of 100%. One of the divs exceeds the height of the view port and the other DIVs do not resize to 100% of the parent DIV which has a position of relative set (which is how it should work in my oppinion).
Except the display table, table-row, table-cell solution, i开发者_运维百科s there any other way of making all divs 100% of the viewport and if one needs to be higher, make the others stretch to 100% of the parent div that got stretched by the increased div.
How? :)
Thank you.
Correct me if I'm wrong but it seems that you want equal height floated columns. The explanation to this can be quite involved so I'll point you to a few examples.
Try
http://thelucid.com/2010/12/03/the-solution-to-fluid-inconsistencies-and-equal-height-columns/
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
I don't follow your question completely. Have a look at this code:
<html>
<body>
<div style="height:50px;position:relative">
<div style="background-color:red; float:right; height:100%">moo</div>
<div style="background-color:green; float:right; height:100%">boo<br/>coo<br/>doo<br/>goo<br/>boo<br/>coo<br/>doo<br/>goo</div>
<div style="background-color:blue; float:right; height:100%">foo</div>
</div>
</body>
</html>
As you can see, the center DIV is has height of more than 50px, so the the outer DIV (with the relative position") is stretched, along with the other inner-DIVs.
Doesn't this work for you?
加载中,请稍侯......
精彩评论