[CSS] Problemen met 100% height - Softwareontwikkeling

woensdag 20 september 2006 16:10

Acties:

Verwijderd

Topicstarter

Het welbekende probleem...

Het is de bedoeling dat een div 100% height krijgt, dus lengte van gehele pagina, alleen wanneer de inhoud kleiner is dat het browserscherm moet hij 100% van browserscherm nemen.

Wat ik heb:

CSS:

code:

html,body {
   height:100%;
}
#divid{
    height:100%;
    min-height:100%;
    background-color: #ffffff;
    z-index: 9;
    position: absolute;
    top:0;
}
body > div#divid{
      height:auto;
}

HTML

code:

1	<body><div id="divid">Bla</div></body>

woensdag 20 september 2006 16:11

Acties:

disjfa

be

En wat doet het precies verkeerd? De margin/padding op de html/body ?

Of iets anders?

disjfa - disj·fa (meneer)
disjfa.nl

woensdag 20 september 2006 16:13

Acties:

Verwijderd

Topicstarter

In FF werkt hij zeer goed, bij niet vullende en vullende content.
In IE laat hij bij niet vullende content echter een groot deel leeg.

woensdag 20 september 2006 16:15

Acties:

Palomar

Voor IE moet je _height gebruiken. Schijnt niet helemaal een legale tag te zijn,. maar het werkt iig.

woensdag 20 september 2006 16:20

Acties:

Swaptor

Java Apprentice

afaik wordt min-height niet ondersteunt in IE, iig niet in IE6 en lager.

Ontdek mij!
Proud NGS member
Stats-mod & forum-dude

woensdag 20 september 2006 16:23

Acties:

disjfa

be

Palomar schreef op woensdag 20 september 2006 @ 16:15:
Voor IE moet je _height gebruiken. Schijnt niet helemaal een legale tag te zijn,. maar het werkt iig.

Absoluut niet. Daar heb je conditional comments voor.

Swaptor schreef op woensdag 20 september 2006 @ 16:20:
afaik wordt min-height niet ondersteunt in IE, iig niet in IE6 en lager.

Daarom staat er bij de meneer een height:100% voor IE.

disjfa - disj·fa (meneer)
disjfa.nl

woensdag 20 september 2006 16:23

Acties:

skabouter

Skabouter

wellicht vind je hier een antwoord op je probleem

[edit] enige aanvulling (van de site af)

code:

<style type="text/css">
/*
CSS-file for Strictly CSS three column layout 2006
http://www.strictlycss.com
Developed by Eivind Savio
*/
* /*Set's border, padding and margin to 0 for all values*/
{
padding: 0;
margin: 0;
border: 0;
}
body, html {
color: #000; 
font-family: Verdana, Arial, Tahoma, sans-serif;
background-color: #eee; 
text-align: center; /*** Centers the design in old IE versions ***/
height: 100%;
}
#mainContainer {
width: 760px;
margin: 0 auto; /*** Centers the design ***/
min-height: 100%;
background: #add8e6 url(/examples/three-column-100-bg.gif) repeat-y; /*** This is our faux columns ***/
text-align: left; /*** Because we centered the text in body we have to move the text back to left aligning ***/
}
* html #mainContainer {
height: 100%;  /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
}
</style>

je body ziet er dan zo uit