I cannot get the height: 100% to fill the viewport in FireFox. I've read a lot of solutions to this problem and implemented them, but still NOT working. Tek-Tips is my last resort. I've validated both the HTML and the CSS -- no errors. Here's the code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd"><html>[/URL]
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>Test FireFox height: 100%</title>
<style type='text/css'>
* html {
height: 100%;
margin:0;
padding: 0;
}
div#container {
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
width:100%;
min-height:100%;
background: black;
margin: 0;
}
div#banner {
margin: 0 auto;
width: 800px;
background: #FDD863;
height: 50px;
border: 1px solid green;
}
div#page {
margin: 0 auto;
height: 100%;
width: 800px;
border: 1px solid green;
background: #FDD863;
}
div#links{
float: left;
width: 195px;
height: 100%;
border: 1px solid red;
}
div#main{
float: left;
width: 595px;
padding-left: 3px;
padding-right: 3px;
background: #FDD863;
border: 1px solid blue;
height: 100%;
}
body {
margin:0;
padding:0;
height:100%;
font-family:georgia;
font-size:12pt;
}
</style>
</head>
<body>
<div id='container'>
<div id='banner'>Banner</div>
<div id='page'>
<div id='links'>Links</div>
<div id='main'>Main
<h2 style='text-align: center'>Test FireFox height: 100%</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet purus nec ligula pellentesque egestas. Morbi ornare lacus et tortor. Etiam non odio vitae quam placerat tempus. Sed interdum, pede eget venenatis suscipit, est urna dapibus dolor, quis molestie leo diam quis ligula. Sed molestie massa a quam. Integer nisl nibh, venenatis sed, pulvinar a, pulvinar imperdiet, metus. Nunc turpis turpis, consectetur in, consectetur non, ornare ac, purus. Nullam faucibus, mi in condimentum semper, diam tortor consequat ante, ut ornare velit lectus aliquam sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget orci quis magna tempus pharetra. Aenean dignissim egestas risus. Nulla massa. Vivamus feugiat odio sagittis nisl. Vestibulum vulputate lacinia sapien. Donec pede. Maecenas et justo vitae enim dictum facilisis.</p>
<p>Suspendisse et lorem vel neque ultricies elementum. Etiam bibendum, nunc nec interdum feugiat, arcu sem dapibus massa, in tempor lectus eros id ligula. Mauris ut est nec libero consequat dapibus. Quisque pede nisi, euismod ut, rhoncus id, feugiat venenatis, massa. Sed sapien mauris, placerat eu, aliquam eget, cursus vitae, libero. Praesent eget libero. Quisque laoreet, ligula non pharetra venenatis, mi elit scelerisque est, sed porta enim tellus at dolor. Aenean pede. Praesent quis mi. Mauris et metus fermentum magna aliquet mattis. Morbi a ligula a ligula imperdiet egestas. Fusce porttitor malesuada massa. Integer placerat nibh ac eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vestibulum nibh quis quam. Mauris mi orci, sollicitudin ut, convallis a, placerat nec, ipsum. Nulla facilisi. Pellentesque ut dolor.</p>
<p>Praesent dui urna, dapibus sed, facilisis nec, hendrerit in, mi. Phasellus lacinia, ipsum vitae hendrerit euismod, mi sem ultrices ipsum, nec placerat justo leo convallis ante. Cras non est. Maecenas suscipit libero id purus. In interdum nisi vel nisl. Aliquam condimentum augue feugiat sem. Fusce et sem. Donec quis nisi. Nulla facilisi. Duis vehicula, ligula non mollis iaculis, arcu libero iaculis ante, sit amet tempus pede sem eu elit. Quisque in tellus. Integer rutrum. Integer nec metus vitae urna vehicula mollis. Pellentesque mattis. Ut gravida. Nam ligula. Donec ac neque non lacus venenatis tristique. Praesent cursus lacus ac augue. Nulla vel nibh.</p>
</div> <!-- end 'main' -->
</div> <!-- end 'page' -->
</div> <!-- end 'container' -->
</body>
</html>