denno020 Posted August 16, 2011 Share Posted August 16, 2011 I was wondering how I could make the footer appear at the bottom of the browser for pages where there isn't enough content to cause vertical scrolling. I want to implement it on a search results page, so when there are very few results, the footer will be attached to the bottom of the browser, however when there are alot of results, then the footer is pushed all the way down to the bottom of that data, as per usual. I have tried positioning the footer absolutely, with bottom:0px;, however that causes the footer to stay there even when there is enough content to push the footer down.. Thanks in advance. Denno Quote Link to comment Share on other sites More sharing options...
Frank P Posted August 16, 2011 Share Posted August 16, 2011 It cannot be done with pure CSS. It should be doable with javascript, because there are these menus that go up with the page while scrolling, until the menu reaches the top o/t browser window and then stays there. But there is a simpler solution: give the content container an overflow: scroll. Like so: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <!-- html, body { height: 100%; margin: 0; padding: 0; overflow-y: hidden; /* prevents double scrollbar in IE */ } #main { position: relative; height: 100%; width: 980px; /* 1024 is coming back */ margin: auto; background: beige; } #header { height: 100px; background: pink url(images/header.png); } #menubar { position: absolute; top: 100px; height: 40px; width: 100%; background: black; color: white; } #content { position: absolute; top: 140px; bottom: 50px; left: 0; right: 0; overflow-y: scroll; } #footer { position: absolute; bottom: 0; height: 50px; width: 100%; background: yellow; } --> </style> </head> <body> <div id="main"> <div id="header">Header</div> <div id="menubar">Menubar</div> <div id="content"> Search results </div> <div id="footer">Footer</div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.