Fuld højde på containere
Jeg kan ikke få siden til at fylde 100% i højden. Den kommer faktisk til fylde mere eller ikke nok...?CSS:
@charset "utf-8";
/* CSS Document */
html, body {
height: 100%;
margin: 0 auto;
}
body {
background-color: #eeeeee;
}
#wrapperfull {
margin:0 auto;
height: 100%;
min-height:100%;
width: 1000px;
position: relative;
border: 1px solid red;
}
#header {
width: 1000px;
margin: 0 auto;
height: 80px;
border: 1px solid #73AD21;
background-color: #CCCCCC;
}
#wrapper {
height: 100%;
position: relative;
border: 2px solid green;
height: 100%;
margin: 0 auto;
}
#main {
height: 100%;
position: relative;
margin: 0 0 0 160px;
background-color: #CCFFCC;
border: 1px solid #ffff00;
/
}
#leftblock {
height: 100%;
position: absolute;
width: 160px;
background-color: #ffff99;
border: 1px solid blue;
}
Og html:
<body>
<div id="wrapperfull">
<div id="header">
<h1 id="hovedoverskrift">Overskrift</h1>
</div>
<div id="wrapper">
<div id="leftblock">
<ul>
<li><b>Hjem</b></li>
<li><a href="side1.html">Side 1</a></li>
<li><a href="side2.html">Side 2</a></li>
<li><a href="side3.html">Side 3</a></li>
</ul>
</div><!--leftblock slut-->
<div id="main">
<h1>Main</h1>
<p>Sidens inhold</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.<br />
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.<br /><br />
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer odio nisl, auctor varius hendrerit in, elementum in dolor. Etiam lectus erat, porta vitae orci eget, hendrerit auctor diam. Nullam a orci dui. In hac habitasse platea dictumst. Aliquam eget convallis eros. Proin sollicitudin tempus efficitur. Maecenas sit amet imperdiet mauris. Quisque vitae augue a risus congue rhoncus. Aliquam semper metus ut lectus dignissim mollis. Mauris auctor convallis felis eu pellentesque. Donec faucibus tortor ut enim interdum aliquet. Donec faucibus fermentum dolor vitae fermentum. Vestibulum sit amet euismod ante. Aliquam aliquam eu urna eget dignissim. Sed accumsan a tellus consectetur ornare.<br />
Nam consectetur sed nunc eget interdum. Suspendisse potenti. Nulla et posuere dolor. Praesent eu ligula in lorem accumsan bibendum. Curabitur elementum ipsum nec mollis ornare. Nullam convallis ipsum at nisl pulvinar, nec hendrerit lectus viverra. Nam tempor augue eu luctus sollicitudin. Phasellus placerat risus justo, non elementum nulla porta vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin at semper elit.<br /><br />
<!--
Praesent accumsan neque ante. Maecenas mi elit, rutrum id efficitur eget, pulvinar sit amet turpis. Fusce sed odio vitae dui viverra aliquam. Nam nibh ligula, semper sit amet elit ut, gravida congue metus. Pellentesque ultrices nulla id volutpat efficitur. Suspendisse in neque vitae orci porta vulputate vel id magna. Pellentesque in pharetra eros. Donec vel lacinia orci, et malesuada nibh. Quisque eu varius turpis. Morbi mauris est, finibus eu accumsan sit amet, blandit a quam. Aliquam gravida est vel tellus porta consequat. Etiam eleifend tincidunt sollicitudin. Duis consequat non enim eget tincidunt. Duis eu commodo arcu. Cras pellentesque mi purus, id tincidunt urna dignissim vel.<br />
Praesent viverra sodales consectetur. Duis leo justo, accumsan quis imperdiet ut, sodales et ipsum. Sed egestas elit ligula, ac consequat dolor tristique ac. Integer fringilla aliquam nulla, sed consequat nisi. Fusce semper odio nec sollicitudin tincidunt. Duis sed eros felis. Mauris sit amet tempor lacus. Integer ullamcorper lorem eget fringilla gravida. Duis id condimentum metus, in gravida metus. Curabitur quam tellus, facilisis sodales nisl id, blandit dictum sem. Quisque rutrum ante a ultricies bibendum. Etiam et nisl mattis, lacinia nunc sit amet, bibendum purus. Nunc faucibus, elit nec semper varius, augue tortor auctor erat, aliquam maximus lectus turpis vel nulla.<br /><br />
Phasellus semper nulla nec sem condimentum sodales. Curabitur consequat, ex eu molestie sagittis, nisl tellus finibus nulla, at pretium urna tortor vitae elit. Praesent vestibulum turpis ipsum, quis suscipit mauris tempus id. Vivamus mauris nisl, hendrerit in massa at, finibus venenatis nulla. Vivamus eleifend arcu et ipsum varius, eu accumsan eros vestibulum. Integer id enim ex. Donec fringilla vitae tortor et elementum. Proin nec lorem nulla. Integer consequat tempus volutpat. Cras orci erat, pharetra at malesuada non, pellentesque ut odio. <br />-->
</p>
</div><!--main slut-->
</div><!-- wrapper slut-->
</div><!-- wrapperfull slut-->
</body>
(De "syge" farver er kun for et synes skyld...)
