Wysokość dla div'a, jak ją ustawić? Opcje

[mike]

Mam taką sytuację:

3 elementy div o następującym wyglądzie:

Kod

+------------------------------------------------+
|+-------------++-------------------------------+|
||             ||                               ||
||             ||                               ||
||             ||                               ||
||             ||                               ||
||      B      ||                               ||
||             ||                               ||
||             ||                C              ||
||             ||                               ||
|+-------------+|                               ||
|               |                               ||
|               |                               ||
|               |                               ||
|     A         |                               ||
|               +-------------------------------+|
|                                                |
|                                                |
|                                                |
+------------------------------------------------+

I teraz pytanie:

Jak zrobić aby element B lub chociażby C miał maxymalną wysokość na jaką pozwala A?
Element A równie dobrze może być elementem BODY.

Mówimy o XHTML'u i style="height: 100%" nie wchodzi w gre bo nie działa.

Ten post edytował mike_mech 21.07.2005, 16:46:05

[revyag]

Miałem chwilkę więc wstępnie poprawiłem ten kod, bo to była masakra (IMG:http://forum.php.pl/style_emoticons/default/snitch.gif) Trzeba by jeszcze go zoptymalizowac, wyrzucić niepotrzebne divy, ale jak mówie miałem tylko chwilkę (IMG:http://forum.php.pl/style_emoticons/default/snitch.gif)
Stosujesz mase niepotrzebnych styli, niektóre nieprawidłowo.
Np. div jest elementem blokowym, więc po co mu jeszcze styl display:block.
Co do wyświetlania trzech kolumn o takiej samej wysokości, to zajrzyj na ala, tam jest rozwiązanie problemu.

Kod

body {
    font-family: verdana, arial, serif;
    margin: 0;
    padding: 0;
    text-align: center;
    color: gray;
    font-size: 10px;
    text-align: center;
}

div#container {
    width:100%;
    margin: 0 auto;
    background: url(images/tlo.jpg) repeat-x;
}
div#logo {
    width: 717px;
    height: 134px;
    margin: 0 auto;
    background: url(images/logo.jpg) top center no-repeat;
}
div#cont {
    width: 100%;
    border: 0;
    background-color: #f1f1f1;
    text-align: center;
}
div#out {
    width: 715px;
    margin: 0 auto;
}
div#in {
    width: 100%;
    text-align: left;
    background-color: #e6e7eb;
}
div#left {
    width: 183px;
    background-color: #dadde2;
    float: left;
    padding-top: 10px;
    text-align:left;
}

div.box1,div.box2 {
    margin: 0 0 -1px 10px;
    width: 160px;
    height: auto;
    background: #9a9a9b;
    border: 1px solid #7e7e7e;
}
div.box2 {
    margin-bottom: 3px;
    height: 100px;
    background: #bfc0c1;
}

div#main {
    margin-top: 10px;
    margin-left: 3px;
    width: 320px;
    background: #f6f7f9;
    border: 1px solid #cacacc;
    float: left;    
}
div#right {
    width: 183px;
    height: 100%;
    background: #dadde2;
    float: right;
}
div.box3 {
    margin: 7pt;
    width: 160px;
    height: auto;
    background: #bfc0c1;
    border: 1px solid #7e7e7e;
}

div#foot {
    width: 100%;
    height: auto;
    background: #dadde2 top center no-repeat;
}

[HTML] pobierz, plaintext 
<div id="container">
    <div id="logo"></div>
    <div id="cont">
        <div id="out">
            <div id="in">
                <div id="left">
                    <div class="box1">sadasd</div>
                    <div class="box2">asd</div>
                    <div class="box1">sadasd</div>
                    <div class="box2"></div>
                    <div class="box1">sadasd</div>
                    <div class="box2"></div>
                    <div class="box1">sadasd</div>
                    <div class="box2"></div>
                    <div class="box1">sadasd</div>
                    <div class="box2"></div>
                </div>
                <div id="main">sadsadsad</div>
                <div id="right">
                    <div class="box3">sa</div>
                </div>
                <br style="clear:both" />
            </div>
            <div id="foot">Stopka Szczurebska</div>
        </div>
    <div>
</div>
[HTML] pobierz, plaintext