If you're a constant web surfer, there are things you have likely come to either expect or like to see. One particular attribute I like and develop most sites to use, is a 'sticky footer'. A sticky footer is simply when the footer is at the bottom of the page (as usual),but even if there isn't a lot of content, it sits at the bottom of the page. I think this looks much better then having the footer of the website show up half way up the page if there isn't enough content.
There are two typical methods you can use / find on the net, see links below, but I will paraphrase the method I like and show you the CSS/HTML layout for it. The method I use is pretty much identical to Method one, so quick it out after. Feel free to copy and paste the CSS/HTMl below.
<html>
<head>
<title>Page with a sticky footer</title>
<!-- Include StyleSheet / Scripts -->
</head>
<body>
<style> /*The CSS, Im using inline styling for the sake of showing you*/
* {
margin: 0;
}
html, body {
height: 100%;
}
#header, #footer, #pageContent{
width: 1024px;
margin: 0 auto; /*who doesn't like a center aligned page?*/
}
#pageContent{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -150px;
/* Note the spacer must be the same height
as your footer. If too small it will not sit
properly, or if too large you will have overlap
*/
}
#footer, #spacer {
height: 150px;
}
</style>
<div id="header">
<p>Your Header Content</p>
</div>
<div id="pageContent">
<p>Your page content.</p>
<div id="spacer"><!--Make sure this is within the PageContent --></div>
</div>
<div id="footer">
<p>Your footer Content</p>
</div>
</body>
</html>
Method 1 (preferred)
Method 2
Hope this is useful!
One thing I neglected to mention, was the use of the css property: "position: fixed".
ReplyDeleteThis something you don't commonly see, but does add a nice 'sticky' effect. When an element is position: fixed, it means "The element is positioned relative to the browser window". In other words, if you lock a div, with the styling:
#somediv{
position:fixed;
top:200px;
right:0px;
}
It will always be stuck in that spot, regardless if the user scrolls.