[css]height=100% gaat niet goed / uitvullen tot einde pagina - Softwareontwikkeling

zaterdag 10 januari 2004 21:38

Acties:

Topicstarter

Wat ik wil lijkt eigenlijk te simpel voor woorden, maar kom er toch niet uit.

Probleem: M'n pagina bestaat ruwweg uit twee gedeeltes:
- een bovenkant met een vaste hoogte
- een onderkant die de rest moet opvullen (verticaal gezien)

hier een test-probeerseltje:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <title></title>
 <style type="text/css">
 body {
    margin: 0px;
    padding: 0px;
    }
#main {
    background-color: #CCC;
    height: 100%;
    }
#top {
    background-color: #F00;
    height: 300px;
    }
#bottom {
    background-color: #00F;
    height: 100%;
    }
 </style>
</head>

<body>

<div id="main">
    <div id="top">
    bla
    </div>
    <div id="bottom">
    dibla
    </div>
</div>

</body>
</html>

Wat er in dit probeersel fout gaat is dat bottom nu net zo groot wordt als dat de pagina hoog is. Er verschijnt dus een verticale scrollbalk en als ik die naar beneden trek dan komt dibla precies boven aan te staan. (Dit is trowens in Mozilla. IE maakt er nog een groter potje van - daar wordt ie zelfs nog hoger waardoor dibla zelfs weer uit beeld verdwijnt)

Heb ook al wat zitten klooien met de dispay: table; property, maar dat hielp niet.

Ben ondertussen al een uur aan het zoeken met de search, maar alle problemen die in de buurt van de mijne komen gaan telkens over een div die net zo groot als de pagina moeten worden ofzo. Niet met nog 1tje er boven die een vaste grootte heeft

Hoe los ik dit nu op?

zaterdag 10 januari 2004 21:41

Acties:

Justice

Wat is er mis dan? je hebt gedefinieerd dat main 100% van de hoogte van body is, en bottom 100% van de hoogte van main.

bottomheight = mainheight = bodyheight.

Dus hij wordt net zo groot als de pagina.

Human Bobby

zaterdag 10 januari 2004 21:55

Acties:

bakakaizoku

Ik neem aan dat het blauwe de uiteindelijke achtergrond moet zijn?

Dan zou ik zelf zeggen, drop die div, en maak de achtergrond van de pagina gewoon blauw?

rm -rf ~/.signature

zaterdag 10 januari 2004 22:00

Acties:

marty

Topicstarter

Justice schreef op 10 januari 2004 @ 21:41:
Wat is er mis dan? je hebt gedefinieerd dat main 100% van de hoogte van body is, en bottom 100% van de hoogte van main.

bottomheight = mainheight = bodyheight.

Dus hij wordt net zo groot als de pagina.

Er is ook nog een top, met een vaste grootte die roet in het eten gooit. Da's juist het hele probleem.

mattttt schreef op 10 januari 2004 @ 21:55:
Ik neem aan dat het blauwe de uiteindelijke achtergrond moet zijn?

Dan zou ik zelf zeggen, drop die div, en maak de achtergrond van de pagina gewoon blauw?

Dit is slechts een versimpelde weergave. De manier waarom ik het toe wil passen ligt wat gecompliceerder, maar vereist dat ik dit princiepe werkend krijg.

zaterdag 10 januari 2004 22:05

Acties:

Justice

Je moet dit "faken". Dus de background-color en dergelijke in main gooien zodat top daaroverheen valt.

Of top absoluut positioneren over een margin-top van bottom. Je kan met css niet aangeven dat een hoogte 100% - 300px oid kan zijn, dan moet je het gaan berekenen met javascript. Echter faken lijkt me dan een elegantere oplossing

Of ik interpreteer je probleem verkeerd, want ik raad naar wat je wil

[ Voor 12% gewijzigd door Justice op 10-01-2004 22:08 ]

Human Bobby

zaterdag 10 januari 2004 22:24

Acties:

marty

Topicstarter

Justice schreef op 10 januari 2004 @ 22:05:
Je moet dit "faken". Dus de background-color en dergelijke in main gooien zodat top daaroverheen valt.

Dat gaat dus niet zoals ik al zei

Of top absoluut positioneren over een margin-top van bottom. Je kan met css niet aangeven dat een hoogte 100% - 300px oid kan zijn, dan moet je het gaan berekenen met javascript. Echter faken lijkt me dan een elegantere oplossing

faken gaat dus niet, maar wat je daarvoor zegt klinkt als een oplossing.

Of ik interpreteer je probleem verkeerd, want ik raad naar wat je wil

Wat ik wil is heel simpel: er zit een div in een container, samen met een andere div. Die container heeft een bepaalde hoogte (in dit geval de hoogte van de pagina) en die andere div zit er boven met een bepaalde hoogte (in dit geval 300px). Nu moet die div gewoon verticaal worden uitgevuld.
In 1996 kreeg CSS1 al een full recommendation van het W3C. Je gaat me toch niet vertellen dat na 8 jaar nog steeds niemand op het idee is gekomen om zoiets in CSS mogelijk te maken?

zaterdag 10 januari 2004 23:37

Acties:

marty

Topicstarter

Die truc met die margin blijkt toch niet echt te werken.
Hij gaat nu namelijk alsnog 300px te ver naar onder door

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <title></title>
 <style type="text/css">
 body {
    margin: 0px;
    padding: 0px;
    }
#main {
    background-color: #CCC;
    height: 100%;
    }
#top {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 300px;
    width: 100%;
    background-color: #F00;
    height: 300px;
    }
#bottom {
    margin-top: 300px;
    background-color: #00F;
    height: 100%;
    }
 </style>
</head>

<body>

<div id="main">
    <div id="top">
    bla
    </div>
    <div id="bottom">
    dibla
    </div>
</div>

</body>
</html>

Ook als ik top en bottom buiten main zet, zo:

code:

<body>

<div id="top">
bla
</div>

<div id="bottom">
dibla
</div>

</body>

en zelfs als ik die top helemaal weg haal en/of van die margin een padding maak krijg ik hetzelfde resultaat (verticale scrollbalk)

Maar misschien heb ik je gewoon verkeerd begrepen? Zou je me in dat geval even op het goeie spoor willen zetten?

zondag 11 januari 2004 00:43

Acties:

Verwijderd

Ik zie het probleem niet. Markup:

code:

1
2
3

<body>
 <div/>
</body>

En dan wellicht wat CSS:

code:

html{
 background:lime;
}
body{
  background:yellow;
}
div{
 background:aqua;
 height:300px;
}

Maar leg is uit wat je precies wil. Het liefst een plaatje oid, want ik kom er niet echt uit.

zondag 11 januari 2004 04:25

Acties:

marty

Topicstarter

Afbeeldingslocatie: http://www.excudo.net/firebird/uitvullen.png

Het bovenste gedeelte is fixed, het onderste gedeelte moet uitgevuld worden. Die popup heeft wel vaste afmetingen, maar IE en Mozilla denken er allebei anders over qua hoe dat te interpreteren. Als ik zelf de maten hard opgeef, berekend uit de afmetingen van de popup kom ik in Mozilla precies uit, maar met IE kom ik tekort.
btw, waar bla die bla staat, da's met een overflow op auto, dus zal daar niet mee in de knoei komen.

Die zwarte border om beide gedeeltes wordt door 4 divjes gevormed trouwens. Dat bemoeilijk het nog eens. En zoals je ziet vallen die er nu onder. Ik heb de code even in een normale pagina geopend en dan blijkt dat het gedeelte dat er onder valt precies de hoogte van de bovenste popup is.

zondag 11 januari 2004 08:54

Acties:

Verwijderd

Volgens mij doe jij gewoon iets fout met het box model: http://tantek.com/CSS/Examples/boxmodelhack.html is het niet?

zondag 11 januari 2004 14:47

Acties:

marty

Topicstarter

Verwijderd schreef op 11 januari 2004 @ 08:54:
Volgens mij doe jij gewoon iets fout met het box model:

Ik waardeer het dat je meedenkt, maar nu roep je maar wat

Met die link schiet ik (dus) ook nix op.

zondag 11 januari 2004 19:50

Acties:

Verwijderd

Laat is een online voorbeeld zijn. Want een border van zeg 4px (aan alle kanten) en een height van 300px maakt in een browser die het box-model goed ondersteunt een totale hoogte van 308px. Daar zou dan nog padding bij kunnen komen.

zondag 11 januari 2004 20:27

Acties:

Verwijderd

Je specificeert dat er een div#main is met een height van 100% van de body height (in dit geval de viewport height). (*) Verder specificeer je dat div#top en div#bottom een height hebben van 300 pixels en 100% van de div#main height respectievelijk. Dit resulteert in een totale height van 100% * viewport height + 300px. Dit past niet in div#main en dus overflowed div#main en komt er een scrollbar. Check dit door aan de body of div#main style `overflow: hidden;' toe te voegen.

Oplossingen:

1. zorg dat de hoogte van de blocks in div#main niet groter wordt dan de de viewport size/ gespecificeerde hoogte. Of houdt de overflow property op hidden.

2. werk met absolute positioning (en padding):

div#top {
background-color: #F00;
position: absolute;
top: 0px;
width: 100%;
height: 300px;
}

div#bottom {
padding-top: 300px;
background-color: #00F;
height: 100%;
}

* Ik geloof dat in IE de body height trouwens niet per definitie de hoogte van de viewport is, daar zou je dan nog html { height: 100% } voor moeten toevoegen.

zondag 11 januari 2004 20:37

Acties:

chris

Misschien dat je hier wat aan hebt

zondag 11 januari 2004 21:08

Acties:

Verwijderd

Misschien wil je zoiets?

PHP:

<html>
<head>
 <title></title>
 <style type="text/css">
 body {
    margin: 0px;
    padding: 0px;   
        overflow:auto;
    }
#main {
    background-color: #CCC;
    height: 100%;
    margin: 0px;
    padding: 0px;
position:relative;
    }
#top {
    background-color: #F00;
    height: 300px;
        width:100%;
        position:absolute;
        top:0;
        left:0;
    }
#bottom {       
    background-color: #00F;
        position:absolute;
        top:300px;
        bottom:0px;
        left:0px;
        right:0px;
        overflow:auto;
border:5px solid red;
    }
 </style>
</head>

<body>
<div id="main">
    <div id="top">
    bla
    </div>
    <div id="bottom">
dibla<br><br><br><br><br><br><br>
dibla<br><br><br><br><br><br><br>
dibla<br><br><br><br><br><br><br>
    </div>
</div>
</body>
</html>

Werkt alleen in mozilla e.d, maar daar valt nog wel wat aan te doen.

zondag 11 januari 2004 21:10

Acties:

marty

Topicstarter

Verwijderd schreef op 11 januari 2004 @ 19:50:
Laat is een online voorbeeld zijn.

Copy en paste het allereerste voorbeeld even in html bestandje. Dat gaat veel sneller. En hou er dan rekening mee dat die divjes zo moeten blijven bestaan en dat een oplossing zoals chris die aandraagt voor mij niet op gaat.
De rest van de html uit het voorbeeldplaatje leidt alleen maar af heb ik het idee.

Want een border van zeg 4px (aan alle kanten) en een height van 300px maakt in een browser die het box-model goed ondersteunt een totale hoogte van 308px. Daar zou dan nog padding bij kunnen komen.

IK zei toch al dat toen ik het in een groter scherm ging testen met scrollbalken, dat de 'overhead' precies de grootte van het bovenste gedeelte was. Da's dus 300 pixels. En dat heeft dus niets met het boxmodel te maken.

chris schreef op 11 januari 2004 @ 20:37:
Misschien dat je hier wat aan hebt

Nee, daar heb ik niets aan want die positioneert ook geen twee divjes boven elkaar. En dat is nou juist het hele probleem

Verwijderd schreef op 11 januari 2004 @ 20:27:
Je specificeert dat er een div#main is met een height van 100% van de body height (in dit geval de viewport height). (*) Verder specificeer je dat div#top en div#bottom een height hebben van 300 pixels en 100% van de div#main height respectievelijk. Dit resulteert in een totale height van 100% * viewport height + 300px. Dit past niet in div#main en dus overflowed div#main en komt er een scrollbar. Check dit door aan de body of div#main style `overflow: hidden;' toe te voegen.

Daar ben ik inmiddels allemaal al achter en ik weet dat het zo werkt

Oplossingen:

1. zorg dat de hoogte van de blocks in div#main niet groter wordt dan de de viewport size/ gespecificeerde hoogte.

Is dat lollig bedoelt ?

Of houdt de overflow property op hidden

Da's gewoon net als een struisvogel je kop in het zand steken. Dat haalt alleen de scrollbar maar weg (terwijl ik daar toch al geen last van had). Als je even naar m'n voorbeeld plaatje kijkt van hoe het moet worden dan zie je dat er onderaan geen border is. Dat effect krijg je precies hetzelfde met deze oplossing. En da's niet de bedoeling.

2. werk met absolute positioning (en padding):

div#top {
background-color: #F00;
position: absolute;
top: 0px;
width: 100%;
height: 300px;
}

div#bottom {
padding-top: 300px;
background-color: #00F;
height: 100%;
}

* Ik geloof dat in IE de body height trouwens niet per definitie de hoogte van de viewport is, daar zou je dan nog html { height: 100% } voor moeten toevoegen.

Dan krijg ik het zelfde probleem met die borders. Is dus ook geen oplossing

zondag 11 januari 2004 21:17

Acties:

marty

Topicstarter

Verwijderd schreef op 11 januari 2004 @ 21:08:
Misschien wil je zoiets?
[...code..]
Werkt alleen in mozilla e.d, maar daar valt nog wel wat aan te doen.

Ja! ik denk dat dit richting een oplossing gaat! (sorry, nog niet gezien toen ik 'n vorige reply aan het tikken was)
Die top: 300px en bottom:0px is wel aardig gevonden. Ik ga er mee aan de gang en je hoort het nog.

(btw, het werkt juist niet in mozilla. Die overflow:auto; in de body zorgt er voor dat het hele scherm wit blijft

)

[ Voor 3% gewijzigd door marty op 11-01-2004 21:19 ]

maandag 12 januari 2004 07:46

Acties:

Verwijderd

(btw, het werkt juist niet in mozilla. Die overflow:auto; in de body zorgt er voor dat het hele scherm wit blijft )

Is gefixed in 1.7a.

woensdag 6 september 2006 13:47

Acties:

GoVegan

marty schreef op zondag 11 januari 2004 @ 21:17:
[...]

Ik ga er mee aan de gang en je hoort het nog.

zo zo die lang aan de gang

woensdag 6 september 2006 15:26

Acties:

Verwijderd

Ik weet niet of ik je goed begrijp maar als je nou eens zoiets doet:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style>
    html, body{height:100%;} 
    html,body {margin:0;padding:0}
    #main{min-height:100%;height:auto; background-color:#0066FF;}
    * html #main{height:100%;}
    #top { width:100%; height: 300px; background-color:#FF0000; }
</style>
</head>

<body>
<div id="main">
    <div id="top">blablabla</div>
    Sed sed sem. Nullam commodo vulputate mauris. Duis sit amet eros. Sed tincidunt sodales tellus. Nam sit amet odio. Nam dictum nisl sit amet nibh. Proin rutrum nunc in lacus. Maecenas et sapien. Phasellus luctus, ligula non congue posuere, mauris est consectetuer lorem, at consectetuer erat nunc ac eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus dapibus nisi ut dolor. Vivamus mollis leo eget elit. Aliquam erat volutpat. Integer tincidunt sollicitudin lacus.
</div>
</body>
</html>

Vrij simpel en lijkt me wat jij bedoelt. De top is 300 px hoog, main die vult uit tot 100% v/d viewport en als de content van main nie in de viewport past dan komen er keurig scrollbalken. Heb het ff getest in IE6, FF 1.5.06 en Opera 9.0 en lijkt overal keurig te werken.

woensdag 6 september 2006 15:31

Acties:

André

Analytics dude

Een 2,5 jaar oud topic kicken

Pagina: 1

Dit topic is gesloten.