CSS div 100%

[Verwijderd]

Ik wil een layout maken voor een site en daar wil ik een header een content container en een footer op.
Nog wil ik dat die header altijd bovenaan in beeld blijft en die footer altijd beneden in beeld.
Dus niet onder aan de pagina. Ik dacht dat dit wel moest lukken als ik een main container maak, waar ik die drie onderdelen weer in zou zetten.
Dit ziet er zo uit:

code:

        <div id="main">
            <div id="top">
                Top
            </div>
            <div id="middel">
            Content
            </div>
            <div id="bottom">
                Bottom
            </div>          
        </div>

</div>

Met als css

code:

#main {
    height: 100%;
    background:yellow;
}

#top {
    height: 100px;  
    background:red;
}


#middel {
    height: 100%;
    background:orange;
}

#bottom {
    position:absolute;
    bottom:0;
    width: 100%;
    background:pink;
}

Dan zou het toch moeten werken.
Maar de middelste div pakt de 100% wel maar gaat 100px te ver door naar beneden.
Ik kan deze wel met een bottom margin kleiner maken, maar de tekst die hierin staat zal toch verder doorlopen.
Hoe kan ik dit oplossen?

[Bozozo]

Zoekt en gij zult vinden

[Verwijderd]

Nee dit is niet helemaal wat ik bedoel,
Ik wil juist dat de complete layout niet groter word dan het scherm.
Uit eindelijk wil ik wanneer er meer content dan plaats is een scollbar op de content div

[Bozozo]

Dan voeg je overflow: auto toe aan de content div. Kan ook overflow: scroll zijn, moet je even proberen.

[_eXistenZ_]

Ik denk dat je dit met een iframe zult gaan moeten doen...
Nvm, je kan een frame met een bepaalde grootte maken met overflow: hidden, scroll-y:none en scroll-x:auto

[ Voor 52% gewijzigd door _eXistenZ_ op 12-03-2008 15:15 ]