[css] height in min-height. - Softwareontwikkeling

woensdag 23 november 2005 21:41

Acties:

Verwijderd

Topicstarter

De pagina spreekt voor zich: http://veijden.nl/dexus/height.html

waarom kan ik een element niet 100% hoog krijgen in een div met min-height:100%?

zie ik nou iets doms over het hoofd of waarom werkt dit niet

woensdag 23 november 2005 21:48

Acties:

André

Analytics dude

Force je pagina in Quirks mode

woensdag 23 november 2005 22:03

Acties:

Verwijderd

Topicstarter

zonder doctype: http://veijden.nl/dexus/heightquirk.html
de height:100% doet nogsteeds niet zijn werk.
het gaat trouwens niet om IE.

woensdag 23 november 2005 22:27

Acties:

miniK0bo

Om te beginnen: schrijf je html code zo correct mogelijk...
met doctype definitie, html-tag, head-tag, body-tag.
alle tags weer afsluiten (zoals je <p> )

ik zie geen html en body -tag dus deze css regel doet het niet: html,body {height:100%;margin:0;padding:0}
wat leidt tot het niet doen van #container, #container p {height:100%;}

de onderstaande code zal het moeten doen...
succes!!!

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
    <style type='text/css'>
        html,body {height:100%;margin:0;padding:0}
        #container {background:red}
        #container p {margin:0;padding:0;background:#eee;line-height:6em;text-align:center;}
        #container {
            height:100%;
        }
        #container p {
            height:100%;
        }
    </style>
</head>

<body>

    <div id='container'>
        <p>Ik wil geen rood op deze pagina!</p>
    </div>

</body>
</html>

woensdag 23 november 2005 22:33

Acties:

crisp

Devver

Pixelated

html en body zijn optional en worden impliciet aan de DOM toegevoegd...

Overigens zegt de spec het volgende:

quote: http://www.w3.org/TR/CSS21/visudet.html#propdef-height
'height'
...
<percentage>
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

Nu is de hoogte van je containing block inderdaad niet expliciet gespecificeerd aangezien het een min-height betreft (en dus computed is). Per spec is dit dus normal behavior.

[ Voor 83% gewijzigd door crisp op 23-11-2005 22:44 ]

Intentionally left blank

woensdag 23 november 2005 22:42

Acties:

André

Analytics dude

Maar voor de overzichtelijkheid is het wel wenselijk een complete HTML te maken. Daarbij negeer je de DTD op het moment dat die elementen missen. IE en FF voegen de html en body automatisch toe maar dat geldt niet voor alle browers lijkt mij?

woensdag 23 november 2005 22:46

Acties:

crisp

Devver

Pixelated

André schreef op woensdag 23 november 2005 @ 22:42:
Maar voor de overzichtelijkheid is het wel wenselijk een complete HTML te maken.

true

Daarbij negeer je de DTD op het moment dat die elementen missen.

waarom? de specificatie zegt duidelijk dat html en body optional zijn, dus het is gewoon valid volgens de DTD...

IE en FF voegen de html en body automatisch toe maar dat geldt niet voor alle browers lijkt mij?

Per spec zouden ze dat wel moeten doen...

Intentionally left blank

woensdag 23 november 2005 22:48

Acties:

André

Analytics dude

Ah oke, duidelijk

woensdag 23 november 2005 23:09

Acties:

Verwijderd

Topicstarter

crisp schreef op woensdag 23 november 2005 @ 22:33:
html en body zijn optional en worden impliciet aan de DOM toegevoegd...

Overigens zegt de spec het volgende:

[...]

Nu is de hoogte van je containing block inderdaad niet expliciet gespecificeerd aangezien het een min-height betreft (en dus computed is). Per spec is dit dus normal behavior.

Hmm volg dit niet helemaal

Wat ik ervan begrijp is:
Omdat het min-height is (ipv. van height) wordt de height:100% van de p als auto gezien...

Is het wel op een andere manier mogelijk om 2 elementen in elkaar te krijgen die allebei minimaal 100% hoog zijn, en meerekken met de content?

in iedergeval bedankt voor jullie reacties.