WN - Matcha <div> höjd (float)

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Matcha <div> höjd (float) (https://www.wn.se/forum/showthread.php?t=1042428)

Matcha <div> höjd (float)

Hej alla glada,

jag har letat och letat svar på denna fråga utan att hitta något vettigt... någon som vet hur man får svävande div element inuti ett föräldraelement att få samma höjd som föräldraelementet? Jag är ute efter en ren CSS lösning.

Obligatoriska koden:

PHP-kod:


		
			
<!DOCTYPE html>

<html>

<head>

<style type="text/css">

#container {width:1010px; margin:0 auto; position:relative; background:#ccc; color:#fff;}

#left {width:350px; float:left; background:#222;}

#right {width:560px; float:right; background:#888;}

#clear {clear:both;}

</style>

</head>

<html>

<div id="container">

  <div id="right">Right part</div>

  <div id="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tristique, velit nec mollis gravida, nunc tellus cursus metus, eget aliquet mauris urna vel risus. Aenean blandit felis sit amet nisi posuere eu aliquet felis eleifend. Vestibulum ut dolor mauris, non iaculis risus. Aliquam volutpat tempus mauris, ac sodales leo ullamcorper non. Sed mollis adipiscing mauris, eu suscipit turpis dignissim non. Pellentesque semper gravida nulla in fringilla. Pellentesque a purus id enim commodo porttitor eu eget turpis. Nulla quis libero mauris. Mauris gravida placerat tortor, at elementum sapien vestibulum vel. Nunc imperdiet dictum ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse condimentum ultrices justo, varius pretium diam facilisis congue. Cras pretium posuere tortor. Duis molestie eros luctus sem posuere et iaculis ipsum feugiat. Praesent pharetra, libero ut sollicitudin auctor, orci mauris ultricies neque, vestibulum porttitor tellus eros in risus.</div>

<div id="clear"></div>

</div>

</html>

Vad jag vill är att få #right att ha samma höjd som #left (eller tvärtom) utan att använda mig av fast höjd (innehållet är dynamiskt).

du kan använda

Kod:

height: 100%;

i css, men haken är att då måste du ha en bestämd höjd på container (eller diven som dessa divar ligger i.)

så om din höjd är olika, så sätt 100% på .container och body

Det går inte. Du kan inte få en div att följa storleken av en annan div.

Men om du har detta kravet för rent grafiska ändamål kan du fejka det med Faux Columns (http://www.alistapart.com/articles/fauxcolumns/)

HTML-kod:

<!doctype html>

<html>

<head>

        <title>untitled</title>

        

        <style>

                html, body { 

                        height:  100%; 

                        margin:  0;

                        padding: 0;

                }

                

                #wrapper {

                        display: table;

                        width: 960px;

                        background: #eee;

                        border: 1px dotted #aaa;

                        margin: 0 auto;

                }

                

                .column {

                        display: table-cell;

                        height: 100%;

                }

                .column.one {

                        background: #222;

                        color: #fff;

                }

                .column.two {

                        background: #888;

                        color: #000;

                }

        </style>

</head>



<body>

        

        <div id="wrapper">

                <div class="column one">

                        foo

                </div>

                <div class="column two">

                        <p>bar baz</p>

                        <p>bar baz</p>

                        <p>bar baz</p>

                        <p>bar baz</p>

                        <p>bar baz</p>

                        <p>bar baz</p>

                        <p>bar baz</p>

                        <p>bar baz</p>

                        <p>bar baz</p>

                        <p>bar baz</p>

                        <p>bar baz</p>

                        <p>bar baz</p>

                        <p>bar baz</p>

                        <p>bar baz</p>

                        <p>bar baz</p>

                        <p>bar baz</p>

                        <p>bar baz</p>

                        <p>bar baz</p>

                        <p>bar baz</p>

                        <p>bar baz</p>

                        <p>bar baz</p>

                        <p>bar baz</p>

                        <p>bar baz</p>

                        <p>bar baz</p>

                </div>

        </div>

        

</body>

</html>

fast fungerar det inte att använda

position:absolute;top:0;left:0;bottom:0;right:0;

föräldraelementet satt till position:relative

IE7 och äldre har inte stör för display: table-cell;

det är möjligt att det går att använda men hela saken var ju att de 2 barnelementen skulle vara svävande och inte absolut positionerade.
IE bryr jag mig inte ett ruttet öre om dock, enbart webbläsare som följer W3C standard (Opera, FF, Webkit).