This HTML, styled as it is, is going to create a consistent footer within the page.
<!DOCTYPE html>
<html style="height: 100%;">
<body style="margin: 0; padding:0; height: 100%;">
<div style="min-height: 100%; background-color: #EEEEEE;">
Do<br />
Re<br />
Mi<br />
Fa<br />
Sol<br />
La<br />
Ti
<div style="padding-bottom: 20px;">
brings us back to...
</div>
</div>
<div style="margin-top: -20px; height: 20px; background-color: #CCCCCC;">
Do
</div>
</body>
</hmtl>
It is important that:
- the html and body tags get a height of 100%
- there are only two divs holding all of the content inside the body tag and the first div has a "min-height" setting of 100%
- the second div is the footer and it should be shoved down past the 100% point on the page consistently causing a scrollbar to display unless one gets rid of the scrollbar by making the top margin on the second div the reciprocal of the div's height (duh, this is heavily recommended)
- the top margin trick will force the second div to overlap the first div's bottom
- compensate for this by making the last bit of content in the first div have an amount of bottom padding equal to the height of the second div
Whew! That is a lot of rules which have to dance together for this to work. If you can get it all to work the result looks like this:
In contrast to the JavaScript stuff I cooked up here, this approach will conditionally show or not show a scrollbar at the browser itself as the situation demands and requires no JavaScript to be made to work.
No comments:
Post a Comment