login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Positionering Div's + Scrollbar

Offline Goerlandt - 03/12/2007 16:30
Avatar van GoerlandtNieuw lid Ik zit met een probleem op volgende site http://sofie.goerlandt.be/

Het grijze vak bovenaan (de header), de menu-items en de footer (created by...) zijn div's die allemaal absoluut gepositioneerd zijn. Dit zal je merken als je het venster wat groter en kleiner maakt.

Daartussen wil ik ook een div plaatsen waar de inhoud terecht moet komen. Deze mag enkel de ruimte tussen de menu-items en de footer gebruiker. (kan dus variëren van bezoeker tot bezoeker). Indien er meer tekst in deze div zit (zie site) dan moet hij daar doormiddel van de overflow een scrollbar tonen in de div en mag hij geen scrollbar weergeven voor de hele site.

De scrollbar weergeven in de div is geen probleem als ik deze reeds een vaste hoogte opgeef maar dat kan ik niet weten doordat het kan verschillen van bezoeker tot bezoeker.

de div voor de tekst heeft volgende css

#content {
position: absolute;
width: 720px;
left: 50%;
margin-left: -360px;
top: 220px;
overflow: auto;
}

iemand ervaring mee?

groetjes,
Frederik

9 antwoorden

Gesponsorde links
Offline DenMette - 03/12/2007 16:50
Avatar van DenMette PHP gevorderde Height instellen
Offline Goerlandt - 03/12/2007 17:03
Avatar van Goerlandt Nieuw lid Dat is juist het probleem, de height is een factor die kan verschillen van gebruiker tot gebruiker. Die div die ik wil gebruiken moet de resterende ruimte opvullen op mijn pagina.

header 200px hoog
menu 20px
*content* hoogte onbekend
footer 20px

de div met de content heeft dus geen vaste hoogte maar ik wil wel dat mijn header, menu en footer telkens op de pagina zichtbaar blijft zonder dat hij hoeft te scrollen

er mag enkel een scrollbar voorkomen in de div met de content indien de tekst er niet in past, dus geen scrollbar op de gehele pagina.
Offline Vincjenzo - 04/12/2007 12:31 (laatste wijziging 04/12/2007 12:35)
Avatar van Vincjenzo Nieuw lid Denk niet dat dit te doen is zonder javascript, je zal de hoogte van het scherm moeten achterhalen en dan instellen hoe hoog je div moet zijn..

EDIT: Je kan misschien ook je footer een fixed positie geven zodat ie met het scherm mee scrolt, maar dan heb je de scrollbar wel op de gehele pagina.
Offline Threetimes - 04/12/2007 17:46 (laatste wijziging 04/12/2007 17:51)
Avatar van Threetimes PHP beginner
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <body onLoad="getElementById('content').style.height=screen.height-240+'px'" onResize="getElementById('content').style.height=screen.height-240+'px'">
edit: spelfouten
Offline Goerlandt - 04/12/2007 19:12
Avatar van Goerlandt Nieuw lid Dit is denk ik wat ik nodig heb! Maar ik krijg nog een fout bij het laden van de pagina. Onderaan in de statusbalk toont hij: "fout op pagina" en als ik er op klik zie ik:

Regel: 8 (regel van de body)
Teken: 1
Fout: Object wordt verwacht
Code: 0
URL: http://sofie.goerlandt.be

de div heeft nochtans als id: content dus daar zal het niet aan liggen denk ik...

Andere tips?

groeten en alvast bedankt!
Offline Threetimes - 04/12/2007 20:40
Avatar van Threetimes PHP beginner Ik heb de fout: het moet document.getElementEnzovoorts zijn, en ik heb de code veranderd zodat de menubalken van de browser ook erafgetrokken worden!
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2. function updateDiv() {
  3. 	if (navigator.userAgent.indexOf("MSIE") > 0)
  4. 	{
  5. 		document.getElementById('content').style.height=document.body.clientHeight-240+'px';
  6. 	}
  7. 	else
  8. 	{
  9. 		document.getElementById('content').style.height=window.outerHeight-240+'px';
  10. 	}
  11. }
  12. window.onload=updateDiv
  13. window.onresize=updateDiv
(alleen getest in Opera)
Offline Goerlandt - 04/12/2007 20:51
Avatar van Goerlandt Nieuw lid Heel erg bedankt voor de snelle reactie en correcte oplossing! Dit werkt perfect! Mijn reddende engel  
Offline Threetimes - 04/12/2007 21:39
Avatar van Threetimes PHP beginner
Goerlandt schreef:
Mijn reddende engel  
niet overdrijven...
Offline remy - 04/12/2007 22:00
Avatar van remy PHP ver gevorderde Allereerst vind ik de website er mooi uitzien! Complimenten. Simpel en strak.

Verder zou ik dit niet met javascript oplossen. Dit is een mooi probleem waar css een uitkomst voor bied. Ik kan je aanraden om je enigsinds te verdiepen in css en divs. Met min-heigt moet dit op te lossen zijn.
Desnoods in de contentvak direct een containerdiv waar je header en menu in staan. Deze kun je dan 100% maken en dus nooit langer dan de browser. (muv ie, die wil nog wel eens een pix langer worden, maar daar zijn oplossingen voor)
EN dan dat vak een padding geven van 220px.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.18s