[CSS/XHTML] div height 100%

[Verwijderd]

hallo,

ik wil een table-georienteerde site omzetten naar XHTML valid met CSS en <div> elementen.

Normaal als je een table height="100%" geeft, dan wordt het scherm gevuld van bottom tot top. Indien er text binnen deze table komt wat niet op het scherm past dan breidt de tabel zich automatisch uit zodat er een scrollbar komt in de browser.

Helaas krijg ik dit nog niet voor mekaar met <div> elementen.

mijn html code staat hier
http://www.w3bdesign.nl/xhtml/index.htm

en mijn css hier
http://www.w3bdesign.nl/xhtml/style.css

Ik heb tijdelijk borders om de belangrijke div blokken gezet zodat het duidelijker wordt.

Wat ik dus wil is dat het blauwe blok minimaal beeldvullend is qua hoogte, en groter is wanneer de inhoud niet op het scherm past. In dit geval is dat zo, aangezien het paarse blok een stuk hoger is door de text die erin zit.. Ik wil dus dat het paarse blok BINNEN het blauw blok blijft (met als einddoel dat de achtergrond van het blauwe blok door blijft lopen over de hele pagina).

Is mijn vraag duidelijk? Weet iemand hoe het moet?

[Michali]

Kijk anders eens op google:

http://www.google.nl/sear...&btnG=Google+zoeken&meta=

Overigens zit je in het verkeerde forum. Dit is een W&G vraag.

[Verwijderd]

oh sorry.

Ik had al wel op google gekeken uiteraard, maar had niks nuttigs kunnen vinden.

als je op "div css 100% height" oid zoekt krijg je allemaal verhalen over hoe je UBERHAUPT een div verticaal schermvullend maakt. Dan moet je de body ook height 100% geven in height.
Maarja, dat is niet wat ik zoek.

[ Voor 55% gewijzigd door Verwijderd op 07-04-2005 15:52 ]

[Michali]

Het is gewoon erg lastig om dat te doen. Er zijn meer mensen die dit geprobeerd hebben en die hebben dat beter gedocumenteerd dan dat wij je hier kunnen uitleggen. Ik denk niet dat we veel verder komen zo.

[NMe]

Zoals in P&W FAQ - HTML / javascript /css, etc... beschreven is, hoort dit niet hier, maar in Webdesign & Graphics.

PW>>WG

[Daspeed]

Ik kan het verkeerd begrepen hebben hoor, maar ben je nu dan eigenlijk niet op zoek naar de min-height property?

[Sappie]

Ik heb wel een oplossing voor je probleem (tenminste als er niet daadwerkelijk content (text/plaatje) onderaan je pagina moet staan. is dat wel het geval dan wordt het probleem een stuk ingewikkelder en imho niet netjes op te lossen met alleen css. kijk daarvoor verder hier: [rml][ CSS] De perfecte CSS-only footer[/rml]). Wat je namelijk zou kunnen doen is de illusie wekken da. er een kolom bestaat die altijd minstens tot het eind van het browser window komt, door het opgeven van een background-image. Dit zal in jouw geval wel netjes werken.

[ Voor 11% gewijzigd door Sappie op 07-04-2005 16:00 ]

[Verwijderd]

DrClearbottom schreef op donderdag 07 april 2005 @ 15:58:
Ik kan het verkeerd begrepen hebben hoor, maar ben je nu dan eigenlijk niet op zoek naar de min-height property?

volgens http://www.greywyvern.com/code/min-height-hack is dat niet compatible met IE. Is dat zo?

[ Voor 63% gewijzigd door Verwijderd op 07-04-2005 16:04 ]

[Daspeed]

IE ondersteunt het standaard niet geloof ik, maar in een zoektocht van mij op GoT ben ik een keer een stukje javascript tegengekomen dat dat fixt zeg maar.

code:

function fixMinHeight(id)
{
    if(document.getElementById(id).currentStyle)
        document.getElementById(id).style.height = document.getElementById(id).currentStyle.minHeight;
}

En dat dan bij de onload aanroepen

[Verwijderd]

Sappie schreef op donderdag 07 april 2005 @ 15:58:
Ik heb wel een oplossing voor je probleem (tenminste als er niet daadwerkelijk content (text/plaatje) onderaan je pagina moet staan. is dat wel het geval dan wordt het probleem een stuk ingewikkelder en imho niet netjes op te lossen met alleen css. kijk daarvoor verder hier: [rml][ CSS] De perfecte CSS-only footer[/rml]). Wat je namelijk zou kunnen doen is de illusie wekken da. er een kolom bestaat die altijd minstens tot het eind van het browser window komt, door het opgeven van een background-image. Dit zal in jouw geval wel netjes werken.

een kolom? met tables bedoel je?

Ik had laatst de table versie door de w3c XHTML validator gehaald en die zat te klagen dat er geen background attribuut zou bestaan voor tabellen

Line 18, column 26: there is no attribute "background"

<td width="42" background="./images/left.gif"></td>

[Sappie]

Ik bedoel niet met tabellen.. als je je body een background geeft op deze manier, waar de background image uiteraard bestaat uit een plaatje van 1 of meer pixels hoog en zoveel pixels breed als je je pagebody wil hebben.

code:

background: url("zelf invullen") repeat-y 50% 0;

hiermee wek je de illusie dat de pagina bestaat uit een kolom die altijd het hele browser window beslaat (faux columns).
Verder interpreteert IE height als min-height en ondersteunt het het gebruik van min-height niet. Min height in FF (e.a.) & IE:

Cascading Stylesheet:

.class {
  min-height: 100px; // voor FF ea
  _height: 100px; // voor IE.. FF ea lezen hier overheen vanwege de "_"
}

[ Voor 3% gewijzigd door Sappie op 07-04-2005 16:11 ]

[Verwijderd]

he dat is wel een goed idee sappi!

dat ga ik eens proberen, dankje wel

[Verwijderd]

Ik heb dat van sappie ooit eens geprobeerd _height: bla; Dit werkte niet.
Je kan ook voor IE dit doen; html #div/ whatever, of html .div/ whatever: height: XXX

alles behalve paarse div fixed doen?

[Sappie]

Verwijderd schreef op donderdag 07 april 2005 @ 17:00:
Ik heb dat van sappie ooit eens geprobeerd _height: bla; Dit werkte niet.
Je kan ook voor IE dit doen; html #div/ whatever, of html .div/ whatever: height: XXX

alles behalve paarse div fixed doen?

Ik denk niet dat turbokeutel daarop doelde, toen hij zei dat hij het eens ging proberen.

overigens is dat toch de meest wijdverbreide oplossing voor het min-height probleem in IE en dat werkt echt wel goed

Een andere oplossing, die ook in Safari werkt, is het opgeven van een display: table-cell; aan het betreffende element waar de min-height op van toepassing moet zijn.. zie ook hier: http://annevankesteren.nl...4/04/min-height-in-safari

[ Voor 3% gewijzigd door Sappie op 07-04-2005 17:20 ]

[Verwijderd]

bedankt voor de antwoorden allemaal.

Ik heb het toch maar met tabellen opgelost, echter wel XHTML 1.0 valid

wel raar dat je geen background attributen hebt met XHTML, die gebruike ik altijd. Maarja, met css lukt het ook dus.

http://www.w3bdesign.nl/preview/

[JHS]

Hoe kan je het XHTML valid noemen terwijl je tabellen voor je layout gebruikt? Dat het door de validator komt wil niet zeggen dat het een valide pagina is. Tabellen zijn niet bedoelt om een layout vorm te geven, maar voor (tabulaire) data. Hier op GoT zijn inmiddels al tientallen discussies gevormd waarom dat zo is, en wat dan beter is, maar als je het gebruikt, pretendeer dan niet XHTML te gebruiken. Overigens is XHTML geen XHTML maar tag soup (alhoewel de meningen daarover verschillen) als je het als text/html verstuurt. XHTML heeft de sfeer over zich dat dat beter zou zijn dan HTML 4 Strict, maar feitelijk creeer je alleen maar problemen voor jezelf .

[Sappie]

Tabellen voor de layout maken het niet meteen xhtml invalid Je neemt het dan alleen niet zo nauw met de semantische waarden van de verschillende elementen. In een enkel geval kun je echt nog niet om tabellen heen, wil je je site cross browser compatible maken / er in elke browser er hetzelfde uit laten zien.
Verder ben ik het wel met JHS eens dat je je pagina's beter als html 4.01 strict kan serveren, wanneer je het ook niet met het juiste content-type verstuurd.

Verder nog een opmerking mbt semantiek / css:

code:

<h1><b>Lorem</b></h1>

Is ook niet "zoals het hoort". Beter geef je je h1 een "font-weight: bold;" in je css.

[Verwijderd]

dus wat de validator zegt is niet van waarde???

[gorgi_19]

Verwijderd schreef op vrijdag 08 april 2005 @ 08:40:
dus wat de validator zegt is niet van waarde???

Dat zegt hij niet. Hoewel de syntax goed is, wil dat niet zeggen semantiek goed is , En afaik crasht IE op het contenttype van XHTML

[JHS]

Sappie: Onjuist gebruik van verscheidene elementen lijken me in strijd met de specificatie, en dus een invalide pagina opleveren? En ja, soms kost het érg veel moeite om het zonder tabellen op te lossen, en soms is het (praktisch) onmogelijk, maar dat maakt het niet een valide pagina . Dat geld trouwens overigens denk ik eerlijkgezegd niet voor de pagina van de TS, maargoed .

[Clay]

Crashes heb ik nog niet gezien. Wat wel zo is is dat IE niet overweg kan met mimetype application/xhtml+xml, maar xhtml 1.0 mag je ook als text/html versturen. Pas in 1.1 mag dat niet meer. De validator is leuk, maar zegt idd alleen maar of je syntax/nesting klopt.
En wat ook niet vaak genoeg gezegd kan worden is dat (x)html + css niet een kwestie is van de td's als div schrijven en die met css stylen Je hebt helemaal geen div van 100% hoog nodig om een background over je hele paginahoogte te tonen.

[Sappie]

JHS: Ik ben het met je eens dat de tables in dit geval niet gebruikt worden waarvoor ze bedoelt zijn. Toch is de pagina wel valid xhtml imho, aangezien de pagina valideert mbv de validator en zich dus houdt aan de opgegeven DTD. Het is verder aan de sitebouwer om wel of niet rekening te houden met juist gebruik van de verschillende elementen.

Verder is de site zoals turbokeutel hem wil bouwen goed mogelijk zonder het gebruik van tables. Uit zijn html blijkt namelijk dat de footer ("© 2005 w3bdesign.nl Alle rechten voor behouden.") niet altijd helemaal onderaan de pagina staat als de content niet groot / hoog genoeg is.

beetje offtopic:

Het wordt imo pas een probleem als dat wel de bedoeling is. Zie ook zoals ik eerder al aangaf [rml][ CSS] De perfecte CSS-only footer[/rml]). Ik heb nog geen css only footer gezien die dat perfect in alle nieuwere browser doet (dus ook in Safari). Nou is dat opzich geen probleem voor mij, alleen wel voor de eventuele klant / opdrachtgever voor wie je je website moet maken. Vaak moet je dan toch teruggrijpen op tables.. of imho ranzig gebruik van javascript.

[ Voor 12% gewijzigd door Sappie op 08-04-2005 10:28 ]