Hi,
I have a webpage which consists of these 3 parts:
- Header (100% wide)
- Content (676px wide)
- Footer (100% wide)
Now, I want the footer (or another div with the same background color) to extend to the browsers bottom. If the page is larger than the browser window, the footer shall remain at it’s default height (scrolling with the rest of the page).
This is not possible without JavaScript, right? Another problem is that the header (!) & content parts have no fixed height. But can this be done, cross-browser, without awfull hacks?
This is my webpage:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><title>100% Height CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<style>
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
body {
font-family: "lucida sans", verdana, arial, helvetica, sans-serif;
font-size: 75%;
}
h1 {
font-size: 1.4em;
padding: 10px 10px 0;
}
p {
padding: 0 10px 1em;
}
#header {
width: 100%;
height: 36px;
background-color: #ccc;
border-bottom: 2px solid #666;
}
#container {
background-color: #ddd;
border-left: 2px solid #666;
border-right: 2px solid #666;
width: 676px;
margin: 0 auto;
}
#footer {
width: 100%;
color: #fff;
text-align: center;
background-color: #666;
}
</style>
<body>
<div id="header">
header
</div>
<div id="container">
<h1>100% Height Demo</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel
nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius,
quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam.
Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit,
sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed
in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula.
Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam
ultricies posuere justo. In feugiat.</p>
<p>Ut lacus neque, interdum in, nonummy ac, placerat a, lorem. In interdum vulputate lectus.
Aenean libero elit, eleifend id, tincidunt id, tristique eu, tortor. Pellentesque urna
dolor, placerat a, pharetra eget, congue ut, ligula. Sed mi. Nunc volutpat. Donec pharetra
accumsan lacus. Integer pede orci, vehicula vitae, porttitor id, pulvinar vel, nisi.
Aliquam mauris ligula, eleifend sit amet, eleifend sit amet, luctus at, turpis. Sed neque
orci, tincidunt id, tempus condimentum, eleifend a, nisl. Etiam auctor. Donec lectus
lacus, consequat ac, ultrices venenatis, imperdiet vel, erat. In porttitor augue at tellus
commodo pharetra.</p>
<p>Sed non nibh. Sed sapien ipsum, fringilla condimentum, consectetuer vitae, convallis eu,
urna. Aenean id elit eu nulla aliquet congue. Sed fringilla nonummy nisi. Donec aliquet.
Quisque varius. Vivamus ut nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Integer lacinia. In leo nulla, molestie ac, dignissim sed, pulvinar at, odio.
Duis sit amet augue.</p>
</div>
<div id="footer">
copyright 2010
</div>
</body>
</html>
Can somebody put me in the right direction? Thanks.
Patrick