login  Naam:   Wachtwoord: 
Registreer je!
 Forum

100% height

Offline artefacts - 07/11/2011 12:06
Avatar van artefactsLid Hallo

Ik wil 2 lijnen verticaal laten doorlopen over mijn volledige browserhoogte.
Dit lukt bij de hoofdcontainer, maar probleem is hier dat ik dit moet doen bij een container die in de hoofdcontainer zit. (er is een hoofdcontainer, dan een linker container en dan een rechter, deze rechter container moet de lijnen krijgen). Hoe kan ik dat best oplossen? Ik heb de site opgebouwd in css.
Zie: http://artefacts-design.be/edenhouse/gallerij.html

Mvg,
Annelies

5 antwoorden

Gesponsorde links
Offline Ontani - 07/11/2011 12:12
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 Je zal er zowiezo voor moeten zorgen dat alle parent divs's inclusief body en html een hoogte hebben van 100%. Elke div waarin de eigenlijke div zit die 100% hoogte moet krijgen zal deze hoogte moeten hebben.
Offline WouterJ - 07/11/2011 16:27
Avatar van WouterJ HTML gevorderde Je zegt wel 100% height, maar waarvan 100%? Want 100% van niks is natuurlijk ook niks. Je moet dus aangeven dat de HTML en BODY tag 100% hoog zijn, dan weet je waarvan het 100% is:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. html,body    { height: 100%; }
Offline Filip - 07/11/2011 18:16
Avatar van Filip IRC guru
Waldio schreef:
Je zegt wel 100% height, maar waarvan 100%? Want 100% van niks is natuurlijk ook niks. Je moet dus aangeven dat de HTML en BODY tag 100% hoog zijn, dan weet je waarvan het 100% is:
[..code..]


Was dat niet identiek aan wat Ontani zei...?
Offline artefacts - 10/11/2011 19:03 (laatste wijziging 10/11/2011 19:47)
Avatar van artefacts Lid Dit lukt me nog steeds niet.

Hierbij css code:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. html,body {
  2. 	margin:0;
  3. 	padding:0;
  4. 	height:auto !important;
  5. 	height:100%; 
  6. 	min-height:100%;
  7. 	font-family:"Baskerville Old Face", "Times New Roman", serif;
  8. 	font-size:small;
  9. 	color:#BDB5A8;
  10. }
  11. div#container {
  12. 	position:relative;
  13. 	margin:0 auto;
  14. 	width:1001px;	
  15. 	height:auto !important;
  16. 	height:100%; 
  17. 	min-height:100%;
  18. }
  19. div#linkerNav {
  20. 	float:left;
  21. 	width:250px;	
  22. 	height:auto !important;
  23. 	height:100%; 
  24. 	min-height:100%;
  25. }
  26. div#rechterNav {
  27. 	height:auto !important;
  28. 	height:100%; 
  29. 	min-height:100%;
  30. 	float:left;
  31. 	width:650px;
  32. 	padding:0px;
  33. 	margin:0;
  34. 	border-left:#CCC 1px solid;
  35. 	border-right:#CCC 1px solid;
  36. 	border-bottom:#CCC 1px solid;
  37. }


Html-code:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="container">
  2. <div id="linkerNav">
  3. ...
  4. </div>
  5. <div id="rechterNav">
  6. ... (hierin zitten meerdere div's die ik af en toe een height mee gaf)
  7. </div>
  8. </div>


Edit Ontani: code-tags vergeten!

Iemand een oplossing?
Offline WouterJ - 10/11/2011 19:27
Avatar van WouterJ HTML gevorderde Wil je misschien de code tussen de daarvoor bestemde code tags plaatsen. Dit maakt het er overzichtelijker op.

En hebt bij je html,body dit staan:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. height: auto !important;
  2. height: 100%;

Door die !important wordt die gevolgd en niet de height: 100%; Haal die height: auto !important; dus helemaal weg en hij zal werken.

Het gebruik van !important moet je eigenlijk altijd voorkomen. Het is vaak een aanleiding tot verkeerd gebruik van classes-/ids-/tagselectors of niet goed gestructureerde CSS.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.209s