login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Div hoogte

Offline mike87 - 01/10/2007 10:51
Avatar van mike87Nieuw lid Css is voor mij echt een probleem gebied.
Pas geleden heb ik met veel moeite en zoeken op internet een div in het midden van me scherm gekregen en dan ook nog eens 100% hoog. 

Maar ja, het mocht natuurlijk niet goed zijn, want als de pagina langer wordt en er een scrollbar aan te pas moet komen stopt me content ineens .....

In me CSS heb ik als volgt:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. body, html
  2. {
  3.     height: 100%;
  4.     width: 100%;
  5.     margin: 0px;
  6.     background-color: #f8f8f8;
  7.     font-family: Verdana;
  8.     font-size: 11px;
  9.     color: #00534d;
  10. }
  11.  
  12. #Container
  13. {
  14.     position: relative;
  15.     height: 100%;
  16.     width: 862px;
  17.     min-height: 100%;!important  
  18.     background:#ffffff;
  19.     left: 50%;
  20.     margin: 0 0 0 -431px;
  21.     background-image: url(../Afbeeldingen/Achtergrond.jpg);
  22.     background-repeat: repeat-y;
  23.     padding-left: 14px;
  24.     padding-right: 14px;
  25. }


De #Container is dus de div die 100% hoogte heeft.
Maar zoals ik net zei, zodra je omlaag scrollt stopt achtergrond van de Container er dus gewoon mee.

Maar hoe los ik dit nu op?

En dan nog een klein vraagje, ik had ook met wat creatief gepuzzel een div onderaan me pagina gekregen:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. #Footer
  2. {
  3.     position: absolute;
  4.     width: 824px;
  5.     height: 25px;
  6.     border-top: 1px solid #dadbc1;
  7.     color: #777777;
  8.     padding-top: 5px;
  9.     top: 100%;
  10.     margin-top: -31px;
  11.     left: 50%;
  12.     margin-left: -417px;
  13. }


Deze verspringt dus ook totaal wanneer de inhoud van de Container langer wordt.
En ook hiermee weet ik niet hoe ik het op zou kunnen lossen.
Hopelijk kan iemand me hiermee ook uit de brand helpen.

9 antwoorden

Gesponsorde links
Offline SilVeX - 01/10/2007 11:22
Avatar van SilVeX HTML beginner Als ik een div 100% hoogte wil hebben geef ik geen height op. En uit mijn ervaring pakt css het % teken niet (bij mij tenminste)
Offline citroen - 01/10/2007 11:40
Avatar van citroen Onbekend k zou zeggen kijk naar de broncode van mijn website. http://www.purevision.be/ dan zou het duidelijk moeten worden.
Offline mike87 - 01/10/2007 11:44 (laatste wijziging 01/10/2007 12:20)
Avatar van mike87 Nieuw lid Als ik geen height opgeef wordt de div even lang als de content.

Maar ik wil dat de content / Container div hoe dan ook, 100% van de hoogte pakt, of de content nu lang of kort is.

dit gebeurd ook, tot de content zo lang wordt dat je moet scrollen, dan houd deze gewoon op.

Voor het gemak even een screenshot gemaakt zodat het allemaal iets duidelijk te zien is:
http://img214.i...eenyk9.jpg

Uit de broncode van de bovenstaande website wordt ik ook niets wijzer.
Offline citroen - 01/10/2007 13:12
Avatar van citroen Onbekend als je in mijn css bestanden zou gekeken hebben zou je waarschijnlijk gezien hebben dat ik nergens height: 100% gebruik. ik gebruik wel min-height: 100%. Wat er voor zorgt dat een block altijd 100% hoogte heeft tot de content groter wordt dan uw scherm, dan zal het de hoogte van de content aannemen.
Offline mike87 - 01/10/2007 13:51 (laatste wijziging 01/10/2007 13:57)
Avatar van mike87 Nieuw lid Dat was me niet opgevallen, maar ik heb het nu wel opgelost.

En hoe zit het nu met de footer?
Deze wil ik altijd onderaan de pagina hebben. Maar als de inhoud te lang wordt blijft deze op een vaste positie staan en niet onderaan de content.

Nog 2 screenshots om het aan te tonen:

De positie van de footer wanneer de content langer word:
http://img253.i...591ek1.jpg

En de onderkant van de content:
http://img404.i...595vk6.jpg
Offline citroen - 01/10/2007 14:30 (laatste wijziging 01/10/2007 16:09)
Avatar van citroen Onbekend je kunt uw content instellen met een position: relative; en dan de footer in uw content plaatsen met een position: absolute; bottom: 0px; je zou zoiets eens kunnen proberen.

Citaat:
Offline mike87 - 01/10/2007 16:05 (laatste wijziging 01/10/2007 16:08)
Avatar van mike87 Nieuw lid Qua CSS had ik dat al.
Ik heb nu de div Footer in de Container div geplaatst.
Maar als de content nu kort is, moet ik onnodig scrollen.
Offline thijsX - 01/10/2007 23:30
Avatar van thijsX Nieuw lid Het makkelijkste:

min-height:

zo heb jij altijd je minimale hoogte!
Offline SilVeX - 02/10/2007 12:42 (laatste wijziging 02/10/2007 12:42)
Avatar van SilVeX HTML beginner Zoals in purevision.be

css code - Bekijk de code zonder highlighting - Klap code in 
  1. #container {
  2. 	min-height: 100%;
  3. }
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.214s