login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Height 100% (Opgelost)

Offline Stijn - 04/07/2011 20:35
Avatar van StijnPHP expert Dag mensen

Ik zit met een probleem met CSS. Op de volgende link zien jullie hoe de layout in elkaar zit.

http://dl.dropbox.com/u/1056571/layout.png

Hieronder zie je het HTML skelet.

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="container">
  2. 	<div id="header">
  3. 		...
  4. 	</div>
  5.  
  6. 	<div id="body">
  7. 		<div id="breadcrumbs">
  8. 			...
  9. 		</div>
  10.  
  11. 		<div id="sidebar">
  12. 			...
  13. 		</div>
  14.  
  15. 		<div id="content">
  16. 			...
  17. 		</div>
  18.  
  19. 		<div id="bottom">
  20. 			&nbsp;
  21. 		</div>
  22. 	</div>
  23. </div>


Via deze link heb ik geprobeert mijn content 100% hoog te krijgen. Helaas lukt dit niet. De bottom div zou normaal helemaal onderaan moeten "kleven" maar hij "kleeft" net onder mijn content div.

Mensen die mij in de juiste richting kunnen helpen?

2 antwoorden

Gesponsorde links
Offline pijke - 04/07/2011 20:48
Avatar van pijke Gouden medaille

Lid		 het is misschien niet zo een mooie oplossing, maar je zou het position: absolute kunnen werken. je kunt tegen de container zeggen height: 100%. als je dan bij je bottom bottom: 0px doet plakt hij onderaan.
Offline Stijn - 04/07/2011 22:40
Avatar van Stijn PHP expert Opgelost. Via stackoverflow zei er iemand dat je gewoon wat moet spelen met left en top. In combinatie met Firebug is het mij dan toch gelukt. Uiteindelijk is dit de code geworden (is maar een stukje van de CSS natuurlijk ;)).

css code - Bekijk de code zonder highlighting - Klap code in 
  1. html, body {
  2.     height: 100%;
  3. }
  4.  
  5. #container { 
  6.     position:relative;
  7.     height: 100%;
  8. }
  9.  
  10. #content{
  11.     position: absolute;
  12.     bottom: 0;
  13.     top: 112px; /* som van de hoogtes van de header + breadcrumbs + border diktes */
  14.     right: 0;
  15.     left: 0;
  16. }


PS: dit werkt goed in IE8, Firefox 5 (wss ook alle andere versies) en Chrome.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.185s