Keskustelu: Nettisivujen teko: Aloittelijan css-kysymyksiä

Minulla on pieni ongelma. Kun teen esimerkiksi vasempaan reunaan divin, niin mitenkä sen saisi jatkumaan alas asti? Tällä hetkellä divi on sen kokoinen, mitä siellä on tekstiä sisällä. Korkeutta ei tietty oikein voi pikseleissä määrätä, kun se on sitten toisella sivulla väärin.

CSS tarjoaa mahdollisuuden ilmaista korkeuden prosentteina.

<div id="sivu">
    <div id="valikko">

    </div>
    <div id="sisalto">

    </div>
</div>

Vaihtoehto A:

#sivu {
    position: relative;
    width: 100%;
}

#valikko {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 250px;
}

#sisalto {
    margin: 0 0 0 250px;
    min-height: 300px;
    padding: 10px;
}

Tässä ratkaisussa #valikko on aina yhtä korkea kuin #sisalto, mutta #sisalto määrää #sivun ja siten myös #valikon korkeuden. #valikon pystysisennykset täytyy määrittää #valikon lapsielementeille, koska muuten sen koko kasvaa ylitse 100%. #sisallolle voi määrittää minimikorkeuden.

Vaihtoehto B:

#sivu {
    width: 100%;
}

#sivu:after {
    clear: both;
    content: '';
    display: block;
}

#valikko {
    float: left;
    width: 250px;
}

#sisalto {
    margin: 0 0 0 250px;
    padding: 10px;
}

Tässä ratkaisussa #valikko ja #sisalto EIVÄT ole samankorkuisia, mutta #sivun pituus kasvaa aina pisimmän mukaisesti. Tämä mahdollistaa taustakuvan käyttämisen sillä tavalla, että syntyy illuusio täyspitkistä elementeistä.

Vaihtoehto C:

#sivu {
    display: table;
    width: 100%;
}

#valikko {
    display: table-cell;
    vertical-align: top;
    width: 250px;
}

#sisalto {
    display: table-cell;
    padding: 10px;
    vertical-align: top;
    width: 100%;
}

Tämä tekee täsmälleen sen mitä haluaisit (eli taulukkotaitosta tutun lopputuloksen), mutta ei toimi IE7 ja IE6. Kaikella muulla kyllä toimii oikein hyvin.

Vaihtoehdot A ja B ovat runkokoodiltaan sellaisia, että ne toimivat jopa IE5+, tosin varmimmin vasta IE6+. DOCTYPEn pitäisi olla tiedoston ihkaensimmäisellä rivillä ja mielellään Strict, vaikuttaa hyvin paljon IE:n renderöintiin.

Nuo kolme vaihtoehtoa ovat aika vaikeita vielä minulle, mutta kattelen.

Jokotai kirjoitti:

CSS tarjoaa mahdollisuuden ilmaista korkeuden prosentteina.

Ei toimi?
On tälläinen pätkä, mutta silti korkeus ei muutu:
height: 100%;

Tepitin: entä kuinka korkea on se elementti, jonka sisällä tuo määritelty "pätkä" sijaitsee?

Lebe80 kirjoitti:

Tepitin: entä kuinka korkea on se elementti, jonka sisällä tuo määritelty "pätkä" sijaitsee?

Eli tuon minulla on div, jonka korkeus ei muutu, vaikka prosenttilukua muuttaa.
Vaikuttaako sen korkeuteen sitten joku muu? Vaikka tuohon height-määritelmän arvoa muuttaa prosenteilla miten, ei vaikuta. Vain pikseleillä määrätty korkeus toimii.