|
Home | Contact Us | Client Testimonials |
Portfolio
|
 |
Making web pages extend to the bottom of browser window
If you ever made a web site with the content in a center
column and a different background for the body, or with
a navigation bar not too tall, probably you experienced
the problem of some elements not extending to the bottom
of the browser window when the content height is lesser
that the content area of the browser window.
For simple designs, like pages with a side navigation
bar and the content in the rest of the page, faking the
layout with a background image can be enough to fix the
problem, but for more complex layouts real full height
element could be required. For that cases we can resort
to JavaScript to perform some DOM manipulation magic.
As an example I'm going to use a layout with one
fixed-width centered column, with the menu at the top
and some decorations at the top and bottom of the
contents. Let's take a look to the basic CSS code:
body {
padding: 0;
margin: 0;
background: url(img/img_116.gif);
text-align: center; /* IE 5.x */
}
#menu {
width: 650px; /* IE 5.x */
height: 25px;
margin: 0 auto;
padding: 10px 20px;
background: transparent url(img/Sample-menu-border.gif)
repeat-y left top;
text-align: left;
voice-family: "\"}0{\"";
voice-family: inherit;
width: 610px;
}
#contents {
position: relative; /* needed by the absolute positioned
decorations */
width: 650px; /* IE 5.x */
margin: 0 auto;
padding: 50px 75px 30px;
background: transparent url(img/Sample-contents-border.gif)
repeat-y left top;
text-align: justify;
voice-family: "\"}0{\"";
voice-family: inherit;
width: 500px;
}I used a fixed height for the #menu element to make the
sample code easier to understand (although is possible
adapting it to work with a non fixed menu height). Here
you can see an example of a page with a lot of content
and a page with very few content.
The JavaScript fix involves getting the size of both the
#contents and document elements. There is no standard
DOM attribute for this, but almost all browsers support
the offsetHeight attribute (although Opera needs some
tweaking for getting the height of the document).
Then we compare the size of the elment to extend
(#contents) the with the size of the document minus the
size of the other elements (#menu ). If it's smaller,
then a style 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;
function adjustHeight() {
if (document.getElementById) {
var targetElement=document.getElementById("contents"),
elementOffset=45, styleOffset=80, documentHeight,
totalOffset;
if (targetElement &&
document.documentElement.offsetHeight
&& targetElement.offsetHeight) {
documentHeight=document.documentElement.offsetHeight;
if (targetElement.offsetHeight<documentHeight-elementOffset)
{
if (isIE5)
totalOffset=elementOffset;
else totalOffset=elementOffset+styleOffset;
targetElement.style.height=String(documentHeight-totalOffset)+'px';
}
}
}
}
window.onresize=adjustHeight;
window.onload=adjustHeight;
Also, for making the script work in Opera 8 and
Konqueror 3.4 we need to set the height of the html tag
to 100%:
html {
height: 100%;
}
To use the code you only need to modify three values and
include a call to the function. First, you need to
change the three values that appear in bold in the
script to reflect the following data:
The ID of the element to the be extended (contents in
the sample code).
The vertical offset (if any) of the element. In the
example, we have the #menu element before the #contents
element with a total height of 45px, so we use 45 as the
element offset.
The vertical offset generated by the styles applied to
the element (margin, padding and border). In the example
we have:
padding: 50px 75px 30px;so we use 80 for the style
offset. This offset is not applied to IE 5.x due to its
broken box model.
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:
<script type="text/javascript">adjustHeight();</script>This
usually works fine since all the DOM objects are already
defined 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.
|
| |
Web design South Africa, Web Design Johannesburg, web design Sandton - African web design company
Web design South Africa web design company, web re-design professional web design and hosting including free web design consultation and web search engine optimisation.
|
|
