anoniem Geplaatst: 15 oktober 2003 Delen Geplaatst: 15 oktober 2003 Wanneer ik een div 'height=100%' meegeef wordt hij zo hoog als het scherm. Scroll je naar beneden, dan zie je dat hij niet even lang is als de pagina. Hoe kan ik dit wel voor elkaar krijgen? Een absolute hoogte kan uiteraard niet, want de hoogte verschilt per schermresolutie. Wie heeft een oplossing? Quote Link naar reactie
anoniem Geplaatst: 15 oktober 2003 Auteur Delen Geplaatst: 15 oktober 2003 Hoogte weglaten? :roll: Quote Link naar reactie
anoniem Geplaatst: 15 oktober 2003 Auteur Delen Geplaatst: 15 oktober 2003 Nee, dat gaat helaas niet. De div is een rode verticale streep van 14px breed met een achtergrond image. Quote Link naar reactie
anoniem Geplaatst: 15 oktober 2003 Auteur Delen Geplaatst: 15 oktober 2003 [code:1:fce7d84c59]body{ background:#fff url(bg) repeat-y 0 0; }[/code:1:fce7d84c59]En dan moet het plaatje natuurlijk 14 px breed zijn. height als attribuut is BTW uit den boze tegenwoordig. Quote Link naar reactie
anoniem Geplaatst: 15 oktober 2003 Auteur Delen Geplaatst: 15 oktober 2003 Helaas moet het een div zijn. Hij moet mouseover namelijk kunnen verdwijnen en hij moet voor een andere div staan... Quote Link naar reactie
anoniem Geplaatst: 15 oktober 2003 Auteur Delen Geplaatst: 15 oktober 2003 Dat vroeg ik mij eigenlijk ook al af: waarom is een hoogte van 100% de hoogte van de viewport en niet van de container-element, de body dus in dit geval? Ik zie eigenlijk alleen maar voor de oplossing van dit probleem scripting en dat zou toch niet moeten volgens mij. Misschien is er ook een css manier? Als dit je div is: <div id="mijndiv"></div> Zoiets valt dan te proberen. document.getElementById('mijndiv').style.height=document.body.offsetHeight; Dit moet waarschijnlijk wel gebeuren na het load event van het document. Dus in een functie stoppen en activeren bij de onload event handler van het document. Quote Link naar reactie
anoniem Geplaatst: 16 oktober 2003 Auteur Delen Geplaatst: 16 oktober 2003 Maar dan ga je wel weer terugvallen op js wat niet zo'n goed idee is zoals je zelf al zegt. Het antwoord is eigenlijk al gegeven: gebruik het niet. En wat ik geleerd heb van xhtml: als het niet lukt, omzeil het probleem. Maak van 1 div 2 divs, ga het box-model-hacken. Die 'fouten' krijg je er nooit uit, jammergenoeg. :roll: PS Ik vind hoe de height en width werkt ook aardig vreemd, maar gelukkig hoef je het niet te gebruiken. Quote Link naar reactie
anoniem Geplaatst: 16 oktober 2003 Auteur Delen Geplaatst: 16 oktober 2003 Kan blijkbaar wel:[code:1:2023f9f299]<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl"> <head> <title>TEST</title> <style type="text/css"> html,body{ margin:0; padding:0; } div{ position:absolute; top:0; left:0; height:100%; width:14px; background:lime; } </style> </head> <body> <div> T<br/>E<br/>S<br/>T </div> </body> </html>[/code:1:2023f9f299]Anne Quote Link naar reactie
anoniem Geplaatst: 16 oktober 2003 Auteur Delen Geplaatst: 16 oktober 2003 Ja, maar nu heeft die nog steeds alleen de hoogte van het scherm en niet de hoogte van de pagina, zoals topicstarter dat wou hebben: [code:1:c32f539da6] <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl"> <head> <title>TEST</title> <style type="text/css"> html,body{ margin:0; padding:0; } div{ position:absolute; top:0; left:60px; height:100%; width:14px; background:lime; } </style> </head> <body> <div> T<br/>E<br/>S<br/>T </div> T<br/>E<br/>S<br/>T T<br/>E<br/>S<br/>T T<br/>E<br/>S<br/>T T<br/>E<br/>S<br/>T T<br/>E<br/>S<br/>T T<br/>E<br/>S<br/>T T<br/>E<br/>S<br/>T T<br/>E<br/>S<br/>T T<br/>E<br/>S<br/>T T<br/>E<br/>S<br/>T T<br/>E<br/>S<br/>T T<br/>E<br/>S<br/>T </body> </html> [/code:1:c32f539da6] Quote Link naar reactie
anoniem Geplaatst: 16 oktober 2003 Auteur Delen Geplaatst: 16 oktober 2003 http://www.limpid.nl/lab/css/fixed/s ? Quote Link naar reactie
anoniem Geplaatst: 16 oktober 2003 Auteur Delen Geplaatst: 16 oktober 2003 Het blijkt dat als je de volgende css-code toevoegt, dat die het wel goed doet: [code:1:6a4691adda] body{ position:relative; } [/code:1:6a4691adda] Op dat moment pakt die niet meer de viewport, maar wel de canvas. Waarom die dat niet meteen doet is mij niet helemaal duidelijk, maar dat zal wel ergens in de css specs staan. Het werkt iig niet in IE5, misschien wel in IE6. Het werkt wel in Mozilla. Quote Link naar reactie
anoniem Geplaatst: 16 oktober 2003 Auteur Delen Geplaatst: 16 oktober 2003 Nog wat gezocht. Hier staat ook nog wat over dit probleem. http://bugzilla.mozilla.org/show_bug.cgi?id=105286 http://www.w3.org/TR/CSS2/visuren.html#containing-block ... [quote:8cecfcf05c] The height of the initial containing block may be specified with the 'height' property for the root element. If this property has the value 'auto', the containing block height will grow to accommodate the document's content. [/quote:8cecfcf05c] Dus height:auto; voor het html element zou ook moeten werken, volgens mij. Mwah, ik krijg het niet aan de praat. Quote Link naar reactie
anoniem Geplaatst: 16 oktober 2003 Auteur Delen Geplaatst: 16 oktober 2003 [quote:31303daa0b="hulpje"]Het werkt iig niet in IE5, misschien wel in IE6. Het werkt wel in Mozilla.[/quote:31303daa0b]IE6 ook niet. Als je IE6 in standard compliant rendering mode zet wordt het helemaal erger, dus dat is zoiezo geen oplossing. CSS is in dit soort dingen iets te vaag en te moeilijk m.i. net zoals je zou denken dat centreren zo zou gaan:[code:1:31303daa0b]div#iets{ margin:auto; height:10px; width:10px; }[/code:1:31303daa0b]Maar dat werkt dus niet :S. Volgens mijn CSS2 Programmer's reference zou het echter wel moeten werken. Iets dergelijk kun je terugvinden in de specificatie. Voeg je er echter: position:absolute;top:0;left:0;bottom:0;right:0; aan toe werkt het wel (in Mozilla dan). Heel raar. Quote Link naar reactie
anoniem Geplaatst: 16 oktober 2003 Auteur Delen Geplaatst: 16 oktober 2003 [url=http://www.saila.com/attic/sandbox/tallbox.html]En toen vond ik deze...[/url] Quote Link naar reactie
anoniem Geplaatst: 16 oktober 2003 Auteur Delen Geplaatst: 16 oktober 2003 [quote:803377cf29] En toen vond ik deze... [/quote:803377cf29] Ik denk toch dat deze in essentie dezelfde situatie weergeeft. Zolang al je content maar in #tallbox zit gaat het wel goed. Je hebt dus in dat geval een extra div nodig. Maar je bedoelt natuurlijk dat dit ook werkt in IE, die extra div is nodig voor IE. Wat betreft je voorgaande post. Hier kon ik er iets over vinden: http://www.w3.org/TR/CSS2/visudet.html#q17 Maar wat betreft dat position:absolute;, daar heb ik geen idee wat er aan de hand is. Als je er dit van maakt: [code:1:803377cf29] div#iets{ margin:auto; height:100px; width:100px; background-color:green; position:absolute; top:0;bottom:0;left:0;right:0; } [/code:1:803377cf29] valt er wel iets af te leiden, maar kan er nog geen soep van maken, wat er precies gebeurt. edit: wacht eens, staat dit niet precies iets verder onder voorgaande link: 10.6.4 Absolutely positioned, non-replaced elements en dan punt 4. Quote Link naar reactie
anoniem Geplaatst: 16 oktober 2003 Auteur Delen Geplaatst: 16 oktober 2003 Toch blijft het raar:[code:1:3a7b610acf]div#een{ margin:0 auto; width:10em; }[/code:1:3a7b610acf]werkt correct, maar:[code:1:3a7b610acf]div#twee{ margin:auto 0; height:10em; }[/code:1:3a7b610acf]niet :) Quote Link naar reactie
anoniem Geplaatst: 16 oktober 2003 Auteur Delen Geplaatst: 16 oktober 2003 Ik vind het eigenlijk ook wel raar. Intuitief zou je zeggen dat als je horizontaal margin:auto kunt gebruiken om te centreren, dat je dat dan ook verticaal kunt gebruiken. Maar om bepaalde redenen heeft de css working group ervoor gekozen om horizontale layout makkelijker te kunnen beinvloeden dan verticale. Hier wordt het een en ander wel een beetje uitgelegd waarom het zo is: http://lists.w3.org/Archives/Public/www-style/2001Oct/0172.html Trouwens, de css-manier waarop zoiets verticaal gecentreerd zou kunnen worden is waarschijnlijk zoiets: [code:1:31739c6b42] div#twee{ display:table-cell; vertical-align:middle; height:10em; } [/code:1:31739c6b42] Quote Link naar reactie
Aanbevolen berichten
Om een reactie te plaatsen, moet je eerst inloggen