div med 100% height.
Jeg har et problem med at få en div til at være 100% altså gå til bunden af skærmenJeg har følgende HTML kode:
<body>
<div id="container">
<div id="header">
<div id="logo"></div>
<div class="banner">
</div>
</div>
<div id="navi">
<ul>
<li><a href="">Arrangementer</a></li>
<li>|</li>
<li><a href="">Aktiviteter</a></li>
<li>|</li>
<li><a href="">Gudstjenester</a></li>
<li>|</li>
<li><a href="">Om Kirkerne</a></li>
<li>|</li>
<li><a href="">Kontakt</a></li>
</ul>
</div>
<div id="content"></div>
</div>
</body>
og min css ser sådan her ud:
body { font-family:Verdana, Geneva, sans-serif, serif; font-size:12px; line-height:1.5em; background-image:url(images/bg.jpg); background-position:top; background-repeat:repeat-x; margin:0px; padding:0px; color:#555555; height:100%; }
#container { position:absolute; width:1000px; min-height:500px; left:50%; margin-left:-500px; }
#header { position:absolute; width:1000px; height:175px; }
#logo { position:absolute; top:20px; background-image:url(images/logo.png); width:274px; height:130px; }
.banner { position:absolute; top:0px; right:0px; height: 175px; width: 700px; margin: auto }
.banner img { padding: 0px; }
#navi { position:absolute; height:25px; top:177px; left:150px; }
#navi ul { list-style:none; padding:0px; margin:0px; }
#navi li { display:inline; padding-right:30px; color:#e2e2e2; }
#navi a, #navi a:link, #navi a:visited, #navi a:active { color:#e2e2e2; text-decoration:none; }
#navi a:hover { border-bottom:1px solid #e2e2e2; }
#sidebar { }
#content { position:relative; top:200px; left:50%; margin-left:-406px; width:812px; background-image:url(images/content_bg.png); background-repeat:repeat-y; height:auto; height:100%; min-height:100%; }
Content er den div som skal køre helt til bunden af skærmen
