[CSS] Wrapper height 100%

[Verwijderd]

Ik ben nu al bijna een dag aan het stoeien om het volgende voor elkaar aan het krijgen...

Zie: http://stud.cmd.hro.nl/0759749/test/?p=nieuws

Het gaat om de de div met torchrun.nl erin (#welcome). In IE wordt deze netjes volledig in de wrapper getoond. Echter in Mozilla neemt de wrapper de grootte aan van het begin scherm (100%) en gaat de #welcome div eroverheen. Ik kom maar niet op de oplossing om het ook in Mozilla werkende te krijgen.

Volledige CSS: http://stud.cmd.hro.nl/0759749/test/css/style.css

Relevante CSS

Cascading Stylesheet:

html,body {
    height: 100%;
    margin: 0px;
    behavior:url("csshover.htc"); 
    background-image: url(../img/background.gif);
    font-family: Georgia, "Times New Roman", Times, serif;
    text-align: center;
}

#wrapper {
    height: 100%;
    width: 760px;
    margin: 0px auto -1px auto; 
    text-align: left;   
}

#border-right,#border-left {
    width: 10px;
    height: 100%;
    float: left;
    background-image:url(../img/background_border.gif);
}

#page {
    width: 740px;
    height: 100%;
    float: left;
    background-color: #FFFFFF;
}

#welcome {
    position: relative;
    width: 430px;
    max-height: 100%;
    float: left;
    left: 20px;
    padding: 10px;
    background-color: #e2e7ef;
}

* html #welcome {
    width: 450px;
}

[Tonio]

Als je eens al die height: 100%; weghaalt is het voor zover ik kan zien opgelost hoor
Dat het op deze amnier wordt gerenderd door FF is niet zo gek, want die 100% is 100% van de viewport van de browser...

[Verwijderd]

mja maar het is juist de bedoeling dat #page (met de witte background) altijd 100% is, ookal scroll je naar beneden...

[Tonio]

maar in IE is die witte achtergrond toch ook meer dan 100% van de viewport?

[Verwijderd]

Elite_Dead schreef op zondag 05 juni 2005 @ 23:16:
Als je eens al die height: 100%; weghaalt is het voor zover ik kan zien opgelost hoor
Dat het op deze amnier wordt gerenderd door FF is niet zo gek, want die 100% is 100% van de viewport van de browser...

Hmmm alle heights weg gehaald en de background-color van de wrapper op #fff gezet. Waarom ben ik daar niet eerder op gekomen Damn, I feel stupid...

[ Voor 3% gewijzigd door Verwijderd op 05-06-2005 23:34 ]

[tweakerbee]

Euh.. containen in een hogere DIV welke je #page, #wrapper e.d. bevatten.
Die laat je dan gewoon lopen tot waar de wrapper gaat.
Andere optie is een background image maken...

[Verwijderd]

Juist, alleen de #wrapper heeft nu nog een height van 100%. En ik heb de #wrapper en de #page allebei dezelfde background-image gegeven voor als een element binnen #page groter is dan de view port van de browser.

[Verwijderd]

Ik heb met hetzelfde probleem te maken gehad. Dit heb ik opgelost door gebruik te maken van de overflow optie. Als je dus de volgende code toevoegd aan #wrapper, moet het goed gaan.

code:

overflow: auto;

[Sappie]

Er bestaat in de CSS specs ook zoiets als "min-height". Dit ondersteunt IE dan weer niet, echter interpreteert IE "height" als zijnde "min-height". Zo, gebruikmakend van de underscore "hack", los je het dan bijvoorbeeld op voor IE en FF:

code:

min-height: 100%;
_height: 100%;