Mal wieder height 100%, innerer DIV nicht 100%

[enbima]

Hallo,

folgendes Problem: ich habe ein wrapper-div mit height:100%, in diesem wrapper möchte ich wiederrum ein div (div#main) mit height:100%. Die höhe 100% funktioniert aber nicht und ich weiss nicht warum.

html, body{
background-image:url(images/bg.png);
height:100%;
margin:0px;
padding:0px;
}

div#header{
background:-moz-linear-gradient(top, #e5e5e5, #b5b5b5); /* Firefox */
background:-webkit-linear-gradient(top, #e5e5e5, #b5b5b5); /* Safari, Chrome */
background:-o-linear-gradient(top, #e5e5e5, #b5b5b5); /* Opera */
background:-ms-linear-gradient(top, #e5e5e5, #b5b5b5); /* IE */
background:linear-gradient(top, #e5e5e5, #b5b5b5); /* W3C Standard */
border-bottom: 1px solid #000000;
height:50px;
position:fixed;
width:100%;
}

div#logo{
border: 1px solid #ff0000;

background-image:url(images/logo.png);
background-repeat:no-repeat;
height:50px;
margin:0 auto;
position:relative;
width:900px;
}

div#wrapper{
border: 1px solid #00ff00;

height:auto !important;
height:100%;
margin:0 auto;
min-height:100%;
position:static;
width:900px;
}

div#main{
border: 1px solid #00ffff;
position:static;
height:100%;
height:auto !important;
min-height:100%;
margin-top:75px;
}

<div id="header">
	<div id="logo"></div>
</div>

<div id="wrapper">
	<div id="main"></div>
</div>

 

[para_noid]

Hi,

die prozentuale Höhenangabe von #main orientiert sich an der height des Elternelements - nicht an der min-height.

Füge also hinzu:

div#wrapper{
  height: 100%;
}

spätestens dann wirst du sehen, dass 100% Höhe und ein Margin nach oben nicht ganz hinhauen.