Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Div moet lengte pagina en niet hoogte scherm hebben

None
17 antwoorden
  • 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?
  • Hoogte weglaten? :roll:
  • Nee, dat gaat helaas niet. De div is een rode verticale streep van 14px breed met een achtergrond image.
  • [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.
  • Helaas moet het een div zijn. Hij moet mouseover namelijk kunnen verdwijnen en hij moet voor een andere div staan…
  • 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.
  • 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.
  • 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
  • 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]
  • http://www.limpid.nl/lab/css/fixed/s ?
  • 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.
  • 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: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.
  • En toen vond ik deze...
  • [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.
  • 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 :)
  • 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]

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.