If you ever made a web site with the content in a center column and a different background for the body, or with a short lateral navigation bar, probably you experienced the problem of some elements not extending to the bottom of the browser window when the height of the content is lesser than the document area of the browser window.
For simple designs, like pages with a side navigation bar and the rest of the page for contents, faking the layout with a background image can be enough to fix the problem, but for more complex layouts real full height element usually are required. For that cases we can resort to JavaScript to perform some DOM manipulation magic.
I'm going to use a layout with one fixed-width centered content area, a menu at the top of it and some decorations at the top and bottom of the content area. Let's take a look to the CSS code:
body {
padding: 0;
margin: 0;
background: White url(img/img_116.gif);
text-align: center; /* IE 5.x */
}
#menu {
width: 650px; /* IE 5.x */
width/**/:/**/ 610px;
margin: 0 auto;
padding: 10px 20px;
background: transparent url(img/sample-menu-border.gif) repeat-y left top;
text-align: left;
}
#contents {
position: relative;
width: 650px; /* IE 5.x */
width/**/:/**/ 500px;
margin: 0 auto;
padding: 50px 75px 30px;
background: transparent url(img/sample-contents-border.gif) repeat-y left top;
text-align: justify;
}
You can see a couple of examples of a page with a lot of content and a page with very few content. If you are wondering about the "/**/:/**/", it's an alternative fancy method to the box model hack.
The JavaScript fix involves getting the size of the document element and the container we want to resize (in this case #contents), and the position of this element. There is no standard DOM attribute for this, but almost all browsers support the offsetHeight and offsetTop attributes (although Opera needs a bit of tweaking for getting the height of the document).
Then we compare the size of the target element (#contents) with the size of the document minus the top offset of that element. If it's smaller, then a style rule with the proper height is applied to #contents (making a difference for IE 5.x due to its broken box model). Also, the code is attached to the onresize event for readjusting the size if the user makes the browser window bigger.
The resulting JavaScript code would be something like this:
var isIE5=navigator.userAgent.toUpperCase().indexOf("MSIE 5")!=-1;
var targetElementID="contents", targetElementStyleOffset=80;
function adjustHeight() {
if (document.getElementById) {
var targetElement=document.getElementById(targetElementID),
documentHeight, totalOffset;
if (targetElement && document.documentElement.offsetHeight
&& targetElement.offsetHeight && targetElement.offsetTop) {
documentHeight=document.documentElement.offsetHeight;
if (targetElement.offsetHeightAlso, for making the script work in Opera 8 and Konqueror 3.4 we need to set the height of the html element to 100%:
html {
height: 100%;
}
For using the code you only need to modify two values and include a call to the function. First, you need to change the values that appear in bold in the script to reflect the following data:
padding: 50px 75px 30px;
margin: 0 auto;For activating the script, we can use the onload event, but the best method is including also a call to the adjustHeight() function just before closing the body tag, like:
This usually works fine since all the DOM objects are already defined at that point, and it's much faster that using the onload event, because this event doesn't trigger until all the page is loaded (images and ads included). Anyway, assigning the function to the event ensures that the function will be called.
Following the next link you can see an example of the page with the JS fix applied.
The script works in Firefox/Mozilla, Internet Explorer 5/6/7, Opera 7/8, Konqueror 3.4, Safari and Omniweb (thanks to Stephen Caudill for the Mac feedback), which adds a nice 99% of the current browser pool :-) .
Posts
All Comments
