I'm trying my first layout with a footer positioned at the absolute bottom of the page, but I've run into an obvious issue - once the page gets tall enough sooner or later you'll need to scroll down, but the footer is fixed in position so it just remains where the bottom of the viewport was when the page was first opened.
How would I get around this? Some javascript?
Here are snippets of the code in question.... think it's enough!
Question
+jamesyfx Subscriber²
Hi,
I'm trying my first layout with a footer positioned at the absolute bottom of the page, but I've run into an obvious issue - once the page gets tall enough sooner or later you'll need to scroll down, but the footer is fixed in position so it just remains where the bottom of the viewport was when the page was first opened.
How would I get around this? Some javascript?
Here are snippets of the code in question.... think it's enough!
HTML
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="ltr"> <head> <title>...</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css" media="screen, projection"> @import url('layout/stylesheet.css') </style> </head> <body> <div id="container"> <header> <h3 title="..."> </h3> <nav> </nav> </header> <aside> <h3 title="...">...</h3> <ul> <li><span title="..."></span>...</li> </ul> </aside> <div id="wrapper"> ... </div> <footer> <p id="copyright"> © </p> </footer> </div> </body> </html>CSS
html, body { margin: 0; font: 1.0em 'Helvetica Neue', Helvetica, Tahoma, Sans-serif; height: 100%; min-width: 850px; color: #222; background-color: #fff; cursor: default } div#container { position: relative; min-height: 100% } div#wrapper { display: block; color: #111; background-color: #fff; padding: 20px; width: 72.5% } footer { position: absolute; bottom: 0; display: block; width: 100%; background-color: #333; color: #fff; text-shadow: 1px 1px 0 #111; padding: 15px 0 15px 0 } aside // sidebar { float: right; height: 100%; line-height: 120%; font-size: 0.9em; border-left: 1px solid #dadada; padding: 0 5px 0 5px; display: block; width: 200px; background-color: #f6f6f6; color: #444; }... Yesss and it is grey and grey. :alien:
Link to comment
Share on other sites
9 answers to this question
Recommended Posts