Header & Footer fixed, center hoogte automatisch aanpassen.

  • Onderwerp starter Onderwerp starter BenSw
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.
B

BenSw

Gebruiker
Lid geworden
1 mei 2012
Berichten
16
Ik heb reeds de vraag gesteld hoe ik mijn header vast bovenaan krijg & de footer vast beneden ongeacht welk venster formaat. Nu zou ik graag willen dat mijn center div (body in css) zich van hoogte aanpast aan de afstand tussen de header & footer en dat wanneer de center div (body) groter is dan die afstand, dat er scrollbars komen.
Nu komt deze ofwel onder mijn footer uit of wel onstaat er witruimte (zie screenshots).

Bekijk bijlage 154287
Bekijk bijlage 154289

CSS code:

html, body {
margin:0;
padding:0;
height:100%;
background: #e5e6e6;
}
#container {
width: 968px;
margin-left: auto;
margin-right: auto;
height:100%;
position:relative;
}
#header {
height: 121px;
}
#nav{
height: 25px;
background-image: url(../images/nav.jpg);
background-repeat: no-repeat;
}
#body {
position: absolute;
overflow-y: auto;
padding-bottom:73px;
background: #666;
}
#footer {
position:absolute;
bottom:0;
width:968px;
height:73px;
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
}
 
Laatst bewerkt:
Heb je al eens zoiets geprobeerd:
Code: 
#body {
   position: absolute;
   top: 150px;
   bottom: 73px;
   overflow: auto;
   background: #666;
}
Wat gebeurt er dan?

PS: ik zou er niet meteen het jQuery uitrol-script slideDown() in zetten, dat gooit misschien roet in het eten.
 
overflow: auto werkt ook niet, had ik al geprobeerd, de body div komt steeds onder mijn footer uit. Ik heb al veel uitgetest van de oplossingen die ze op internet geven, maar weinig resultaat. Kan dit misschien zijn dat mijn body-div en footer-div op het zelfde niveau zitten?

En ik heb even een nieuwe html file gemaakt om gans opnieuw te beginnen dus die jQuery zit er momenteel nog niet in.
 
Laatst bewerkt:
Ik heb de oplossing gevonden en dat is zonder container werken. Nu is mijn vraag wel of dit wel goeie CSS is? Of wat het nadeel is van zonder een container te werken? Want ik heb altijd geleerd om met container te werken..

Mvg
 
Is zonder container prima css! :)
Vroeger moest vaak een container gebruikt worden om oude IE's (IE5 enzo) een pagina te kunnen laten centreren. Vanaf IE6 hoeft dat niet meer, en intussen is ook IE6 alweer ter ziele.
De container kan dus zonder meer gemist worden, is ook veel overzichtelijker: de <body> eigenschappen staan nu gewoon bij de body-css.

Kijk je nog wel even naar de html-validator?
En kan je andere vraag nu afgesloten worden? Anders blijft die zo zielig openstaan. ;)

Met vriendelijke groet,
CSShunter
 
Jup die mag afgesloten worden! Bedankt voor je hulp!
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan