Css: Uitvullen pagina in 3 delen

[vorlox]

Beste Allemaal,

Ik heb een vraagje over CSS en uitvullen van pagina's.
Ik werk al tijden met css...en ik heb w3schools talloze malen doorgelopen..maar waar ik nu echt nog nooit antwoord op heb gekregen is het volgende.

ik heb een pagina onderverdeeld in 4 blokken.
3 van deze blokken hebben een vaste hoogte en een breedte van 100% oja en ze zijn relative.
Prima..dat werkt... maar nu nu wil het 4e blok de rest van de pagina laten uitvullen.

zie voorbeeld http://vorlox.xs4all.nl/webstuff/menu.html

het groene blok moet dus uitvullen naar onderen..
Dit kan ik natuurlijk doen met een stukje JS maar kan het ook anders.

Ik heb al zitten denken aan een relative div van 100% met een top-padding die even hoog is als de som van alle hoogten van de 3 andere divs en deze absolute eroverheen plaatsen..

Kan iemand me een tip geven misschien

[Superdeboer]

Tsja... als het je toch allene maar gaat om het visuele effect dat dat groen verder helemaal tot de onderkant van de pagina moet lopen, doe dan simpel het volgende:

Cascading Stylesheet:

.body { margin: 0px; padding: 0px; background-color: green;}

[NoFearWizz]

met tables is het makkelijk

height 100% zetten

maar met css kan da nie

[ Voor 93% gewijzigd door NoFearWizz op 22-02-2005 21:26 ]

[vorlox]

aij nee j hebt het niet begrepen... het gaat mij niet om het visuele effect...
In dat groene vlak moeten b.v views geladen worden met soms een hoop records.
Ik wil dan dat dat groene vlak een overflow: auto krijgt waardoor deze zelf een scollbalk zal tonen

snappie

[NoFearWizz]

met css kon zoiezo niet wat ik wou

maar ik weet niet of dat kan een scroll bar binnen een div....

[JHS]

vorlox schreef op dinsdag 22 februari 2005 @ 21:25:
snappie

Eerlijkgezegd niet . Wil je nu een soort frames, of dat dat groene deel met meer records groter wordt, of wat?

[Superdeboer]

Ik weet niet of je in IE zit te testen of in Firefox...
Maar als je geen vaste hoogte op je contentdiv zet dan rekt dat ding vanzelf (ook in Firefox) wel mee met de content die erin zit.
Door die body groen te maken zoals ik eerder al zei heb je het effect dat die hele rest van je pagina netjes groen wordt gemaakt, behalve die paar divs die je expliciet anders gespecificeerd hebt.

Waarom je per se scrollbalk wil snap ik niet? In je TS zeg je dat je dat blok wilt laten uitvullen... dat is toch niet meer dan een visueel effect? De rest gebeurt wel door de browser zelf.

[Verwijderd]

Je kan een img van 1 bij 1 pixel maken en dan dit doen:

In je css:
img { height: 200px; width:0px; } /* 100% werkt in IE helaas niet */

en in je div:
[img]'1bij1.gif'[/img]

Vrij simpele oplossing.

[ Voor 9% gewijzigd door Verwijderd op 22-02-2005 22:03 ]

[JHS]

Verwijderd schreef op dinsdag 22 februari 2005 @ 22:01:

En wat schiet je hier mee op . Spacer gifjes konden juist door css worden uitgebannen, maar ik zie de hele relevantie in deze context écht niet?

[Thijsmans]

NoFearWizz schreef op dinsdag 22 februari 2005 @ 21:27:
met css kon zoiezo niet wat ik wou

maar ik weet niet of dat kan een scroll bar binnen een div....

Ja, dat kan. Zie de overflow-eigenschap @ w3schools.com.

Even geheel(?) offtopic, je html-gebruik is nogal onethisch.

HTML:

<div class="PageNavigationBlock"> 
  <div class="NavigationTab">hallo</div>
  <div class="NavigationTab">hallo</div>
  <div class="NavigationTab">hallo</div>
  <div class="NavigationTab">hallo</div>
</div>

Dit hoort natuurlijk gewoon in een lijst te staan:

HTML:

<ul class="nav">
    <li>Hallo</li>
    <li>Hallo</li>
    <li>Hallo</li>
    <li>Hallo</li>
    <li>Hallo</li>
</ul>

Met de bijbehorende CSS:

Cascading Stylesheet:

ul.nav { list-style-type: none; padding: 0; margin: 0; }
ul.nav li { margin: 0; float: left; width: 100px; }

* Thijsmans mompelt iets over semantiek

[Woudloper]

Prammenhanger schreef op dinsdag 22 februari 2005 @ 23:02:
* Woudloper mompelt iets over semantiek

* Woudloper moet een beetje denken aan onderwerpen als 'taming the list' of bijvoorbeeld Listamatic: one list, many options. Bij die laatste zijn ook de nodige tabs geörienteerde oplossingen/voorbeelden te vinden...

[Verwijderd]

Volgens mij wil de TS dat de groene div de rest van de viewport vult en dat de scrollbalk beperkt blijft tot de groene div. Oftewel dat de bovenste navigatie-zutt in beeld blijft. Frames zonder frames dus.

Ik heb er bijna nooit mee te maken maar volgens mij werkt overflow:auto; pas lekker betrouwbaar als je een height mee geeft aan die div. Ik denk dat je dan toch aan javascript vast zit. Ik zou zorgen dat je groene vlak het iig zonder javascript goed doet, dus netjes onder je menu's staat. Vervolgens een net stukje javascript dat iig geen errors geeft en dat de hoogte van het div zet. Als het javascript dan niet werkt heb je iig niet het instortende-kaartenhuis-effect.

[vorlox]

Beste Type-O
Precies
Het moet een soort frameset worden zonder frames inderdaad

hier een voorbeeld met tabellen....zodat het wel werkt. (Wordt ook gepikt in mozilla)
http://vorlox.xs4all.nl/webstuff/tabellen.html

Oja Beste Prammenhanger
Natuurlijk heb je gelijk met die list....maar waarom zou je dat moeten???
Misschien wil ik er namelijk nog meer mee doen...zoals het b.v zorgen dat alles gecontrolleerd naar een nieuwe regel gaat....wat ik al zei heb ik w3schools meerde malen doorlopen en ik denk dat ik ook de list truuk wel ken.......maar daar ging het me even niet om dus...
het gaat me om de uitvulling van een div...?? maar daar heb jij dus ook geen antwoord op..

Beste Woudloper
mooie tip...die kende ik niet....ga ik mee aan de slag

[ Voor 6% gewijzigd door vorlox op 25-02-2005 12:59 ]

[Superdeboer]

vorlox schreef op vrijdag 25 februari 2005 @ 12:57:
Het moet een soort frameset worden zonder frames inderdaad

hier een voorbeeld met tabellen....zodat het wel werkt. (Wordt ook gepikt in mozilla)
http://vorlox.xs4all.nl/webstuff/tabellen.html

Tabellen zijn geen oplossing daarvoor, maar een schijnoplossing. Om dezelfde reden als waarom je het list-element zou moeten gebruiken voor je menu's, moet je géén tabellen gebruiken voor de opmaak van je pagina. Die reden is semantiek, hierboven al eerder genoemd. Tabellen zijn bedoeld om tabulaire data in neer te zetten: gegevens die dus echt vanwege hun inhoud ook in een tabel thuishoren (statistische gegevens over het algemeen). Dat is in het geval van jouw pagina waarschijnlijk niet het geval.

Oorspronkelijk is HTML nooit bedoeld geweest om een document op te maken, maar om het te structureren, dus om de content te definiëren. Helaas heeft men dat even uit het oog verloren bij de specificatie van HTML 3.2, en zijn er elementen als 'font' en dergelijke gekomen, omdat er vraag was naar meer mogelijkheden om het uiterlijk van de documenten een beetje op te leuken. Daar is men sinds HTML 4.0 weer van teruggekomen.

Sinds de komst van HTML 4.0 is het de bedoeling dat alle opmaak uit het HTML-document wordt gehaald en verplaatst wordt naar een stylesheet. Door op die manier een scheiding tussen structuur en opmaak te creëren, wordt je document veel beter onderhoudbaar. Door presentational elements niet meer in je HTML te hebben (tables voor opmaak van je pagina vallen daar ook onder), kun je de complete opmaak van je pagina wijzigen door alleen je CSS te veranderen. Dan hoef je helemaal niet aan je HTML te komen.

Voor een oplossing voor het probleem dat jij nu hebt, kun je eens kijken bij deze voorbeelden van Anne van Kesteren, over hoe je een frames-effect kunt bereiken zonder frames: http://limpid.nl/lab/css/fixed/ door gebruikmaking van CSS.

[Res-q]

HTML:

<!-- Quirksmode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

html, body {
  height: 100%;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}

#container {
  height: 100%;
  padding-top: 80px;
  -moz-box-sizing: padding-box;
}

#top1 {
  position: absolute;
  top:0px;
  left:0px;
  height: 40px;
  width: 100%;
  background-color: HighLight;
}
#top2 {
  position: absolute;
  top:40px;
  left:0px;
  height: 20px;
  width: 100%;
  background-color: ThreeDFace;
}
#top3 {
  position: absolute;
  top:60px;
  left:0px;
  height: 20px;
  width: 100%;
  background-color: white;
}

#rest {
  position: relative;
  height: 100%;
  background-color: green;
  overflow: auto;
}

</style>
</head>
<body>
<div id="container">
  <div id="top1">menu</div>
  <div id="top2">top</div>
  <div id="top3">top</div>
  <div id="rest">
      a lot of content here a lot of content here a lot of content here
      a lot of content here a lot of content here a lot of content here
      a lot of content here a lot of content here a lot of content here
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
  </div>
  
</div>
</body>
</html>

Werkt perfect

met dank aan [rml]crisp in "[ css] 3 rows, 2 vast, de ander zoekt het..."[/rml]

edit:
nu ook in IE6

[ Voor 64% gewijzigd door Res-q op 25-02-2005 13:26 ]

[vorlox]

Superdeboer
Res-q



bedankt voor de tip....je hebt 100% gelijk over de opmaak e.d....maar tja je gaat opzoek naar oplossingen he.