CSS / XHTML: Left floating DIVs with equal heights when height is set to 100%_问答_开发者

CSS / XHTML: Left floating DIVs with equal heights when height is set to 100%

开发者 https://www.devze.com 2023-02-09 10:31 出处：网络

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 DI

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?