[CSS] footer onderaan de pagina, ook als content klein - Softwareontwikkeling

woensdag 29 maart 2006 11:28

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Hallo,

Met onderstaande opzet dacht ik er voor te kunnen zorgen dat het gedeelte dat in de footer komt te staan altijd strak onderaan de pagina komt te staan. Op de een of andere manier zorgt de height=100% er echter voor dat de pagina langer wordt waardoor er onnodig gescrolld moet worden om de footer te kunnen zien. Als ik echter geen height=100% gebruik dan komt de footer halverwege de pagina te staan als de content niet groter is dan de hoogte van het browser window. Hoe zorg ik er nu voor dat de footer wel altijd strak onderaan staat (dus zowel bij kleine content als grote content)?

Ik heb via Google zitten zoeken naar mogelijke oplossingen, maar ik kan niets vinden dat aansluit bij wat ik hierboven beschrijf.

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Test</title> 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 

<style> 
body { 
    margin: 2px; 
    padding:0px; 
    height:100%; 
} 
a { color: black; } 
a:visited { color: black; } 
#header { 
    width:100%; 
    height:190px; 
} 
#content { 
    width:770px; 
    text-align:left; 
    padding-left:10px; 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    font-size:10px; 
    height:100%; 
} 
#footer { 
    text-align:center; 
    width:770px; 
    font-size:9px; 
    clear:left; 
} 

</style> 

</head> 
<body> 
<div id="header"> 
  [img]"images/Header.jpg"[/img] 
</div> 
<div id="content"> 
HIER ALLE CONTENT   
</div> 
<br /> 
<div id="footer"><a href="index.htm">home</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="profile.htm">Profile</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="contact.php">Contact</a></div> 
<div id="clear">&nbsp;</div> 
</body> 
</html>

woensdag 29 maart 2006 11:30

Acties:

0 Henk 'm!

rick77

... get to the point!

code:

1	clear: both;

toevoegen aan #content
sorry, verkeerd je probleem gelezen... is niet echt een goede oplossing voor geloof ik, behalve met js een div op een constante positie houden, maar dat is zo lelijk

[ Voor 65% gewijzigd door rick77 op 29-03-2006 11:33 ]

woensdag 29 maart 2006 11:35

Acties:

0 Henk 'm!

Verwijderd

Volgens plaatsen bij #footer

code:

1 2	position:absolute; bottom: 0px;

Geeft wel andere problemen, maar dit helpt je op weg

woensdag 29 maart 2006 11:49

Acties:

0 Henk 'm!

Martinspire

Awesomeness

volgens mij als je de header, content en footer met pixels defineerd (bv 20px e.d.) dan staat ie er wel gewoon onder

al moet je dus wel de hoogte van je pagina instellen.

dus dan krijg je:

code:

#header { 
    height:190px; 
} 
#content { 
    height:500px; 
} 
#footer { 
    height: 40px;

al is dit natuurlijk ook niet echt een megaoplossing voor als je bv een script erin zet of een select query draaid waarvan je de grootte niet weet/kan bepalen

bovendien moet je dus van tevoren weten welke resolutie iemand heeft, al is dat niet zo heel moeilijk want met een simpel php script kom je erachter

maar waarom wil je het precies bovenaan en onderaan hebben?

[ Voor 21% gewijzigd door Martinspire op 29-03-2006 11:50 ]

Martinspire - PC, PS5, XSX

woensdag 29 maart 2006 11:59

Acties:

0 Henk 'm!

nitpicker

uNF

Verwijderd schreef op woensdag 29 maart 2006 @ 11:35:
Volgens plaatsen bij #footer
code:
1
2
position:absolute;
bottom: 0px;
Geeft wel andere problemen, maar dit helpt je op weg

bovenstaande inderdaad bij de #footer.
En bij jou bij de body height:100% weg.

woensdag 29 maart 2006 12:27

Acties:

0 Henk 'm!

Justice

Cascading Stylesheet:

1	position:fixed;

Werkt in IE7beta2, Firefox en Opera. Dus het ligt eraan of je perse dit ook voor IE6 etc wil of dat je liever een gewone footer werkt. Er zijn wel fixes te vinden voor IE6

Human Bobby

woensdag 29 maart 2006 19:59

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Bedankt voor de reacties. Ik snap een hapklare oplossing niet echt bestaat. Voordat ik een van de workarounds ga proberen vraag ik me nog het volgende af:

maar waarom wil je het precies bovenaan en onderaan hebben?

of dat je liever een gewone footer werkt

Ik dacht dat het heel gebruikelijk was om de voettekst (in mijn geval navigatielinks in het klein) geheel onderaan de pagina te zetten?! Dat is dan toch een gewone footer? Of gaat er hier iets helemaal langs me heen??

woensdag 29 maart 2006 20:42

Acties:

0 Henk 'm!

Martinspire

Awesomeness

nouja, got heeft ook geen balk aan de onderkant plakken dus misschien is het wel wat raar

tegenwoordig zijn de pagina's steeds langer en wordt het meer een pagina geheel net zoals in ms word ofzo waar je bij moet scrollen

ik ken iig geen tot weinig paginas waar de footer (en eventueel header) precies op de rand liggen

Martinspire - PC, PS5, XSX

woensdag 29 maart 2006 20:53

Acties:

0 Henk 'm!

JHS

Splitting the thaum.

Dat de height 100% oplevert dat het extra hoogte meebrengt is niet zo gek, aangezien het 100% van de container is, waarbij de andere hoogtes in die container er nog bij worden opgeteld

. Een oplossing kan je misschien wel vinden op http://annevankesteren.nl/2004/07/fixed-positioning , en dan http://limpid.nl/lab/css/fixed/footer , maar dat is mogelijk niet helemaal wat je wil

.

DM!

woensdag 29 maart 2006 21:22

Acties:

0 Henk 'm!

orf

Wij doen het met JavaScript; rek een div uit op basis van de resolutie van de gebruiker - de hoogte van de footer.