Menu
I'm coding a webpage that should have a header on top, a footer on bottom, and a side column on the right side. I'm having trouble with getting the footer to be on the bottom of the page. I don't want it to be position: fixed (that'd get annoying), but I do want it to appear at the bottom of the page when you scroll all the way down. (In the case that no scrolling is needed, it should appear at the bottom of the window)
Here's what I'm using. There's probably a pretty simple fix but I don't see what it is. Copy/paste this and you'll see.
<html>
<head>
<style type="text/css">
body {
font-size: 200%;
}
#side {
position: absolute;
right: 0;
top: 0;
bottom: 0;
background-color: #0A0;
z-index: 100;
}
#header {
height: 40px;
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: #A00;
z-index: 200;
}
#header_push {
clear: both;
height: 40px;
}
#footer {
height: 50px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #00A;
z-index: 150;
}
#footer_push {
clear: both;
height: 50px;
}
</style>
</head>
<body>
<div id="header">
HEADER
</div>
<div id="header_push"></div>
<div id="content">
<h1>Content</h1>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.</p>
</div>
<div id="side">
SIDE COLUMN
</div>
<div id="footer_push"></div>
<div id="footer">
FOOTER
</div>
</body>
Working correctly:
Working incorrectly when scrolling down (see scrollbar on side of page):
294
You need change the position to fixed
58
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
