One of many good issues about old-school desk structure strategies is that they permit you to create liquid web page designs very simply. If you wish to heart content material vertically or stick a footer to the underside of the browser window, all it’s a must to do is embrace one fundamental desk with a peak of 100% and place parts within it.
Article Continues Under
With net requirements, you possibly can’t do that anymore. The desk peak property is deprecated in XHTML, and net requirements suggest that you just keep away from utilizing tables for web page structure. To divide structural markup from presentation, CSS is the best way to go — however if you wish to use CSS for vertical positioning, you face an absence of help from some mainstream browsers.
This text explores the methods you possibly can place footers utilizing net requirements, though the identical strategies could also be used to vertically place different parts. Many designs include a footer that’s positioned straight beneath the content material space, except the content material and the footer collectively don’t fill the window fully. On this case, the footer will likely be positioned on the backside of the browser window.
Absolute positioning in a relative field#section2
So how do you place a footer with CSS? Image a container with a hard and fast width. The container consists of a variable quantity of content material adopted by a footer with a hard and fast peak. While you add content material, the peak of the container grows; while you subtract content material, it shrinks.
When you create a comparatively positioned container and nest a content material block, by default it’s going to comply with the traditional circulation contained in the container, increasing or diminishing the peak of its guardian with its content material. One of many strengths of relative positioning is you could nest absolute-positioned parts within them. This makes it attainable to nest a footer block and place it completely to “stick” on the backside of the container. Your markup code appears like this:
<div id="container">
<div id="content material">...</div>
<div id="footer">...</div>
</div>
And your type guidelines appear to be:
#container {
place: relative;
}#footer {
place: absolute;
backside: 0;
}
Nonetheless, completely positioned parts are taken out of the traditional circulation and are positioned over regular flowed parts. Since you don’t need your footer to overlap your content material, you possibly can add some padding to the underside of the content material block to compensate the footer’s peak. It’s possible you’ll view the end in instance 1.
This step doesn’t work accurately in Web Explorer 5.x/Home windows. For these browsers a completely positioned baby loses its place when the peak of the guardian aspect isn’t set. We’ll concentrate on the container’s peak within the subsequent step.
Connecting the container to the viewport#section3
Thus far, the peak of the container is set by the peak of the content material block, which is cool if there may be sufficient content material to fill the peak of the browser window (additionally referred to as the viewport). If this isn’t the case you need the footer to stay to the underside of the browser window.
In CSS, that is a simple impact to create. When you give the container a minimal peak of 100% with the min-height attribute, the minimal peak of the container is the same as the peak of its guardian aspect: the physique aspect. You specify that the peak of the physique aspect should equal the peak of the viewport by setting the peak of each the physique and the html aspect to 100%:
html, physique {
peak: 100%;
}
#container {
place: relative;
min-height: 100%;
}
It’s possible you’ll view the end in instance 2. That is all of the code that ought to be wanted to place a footer with CSS. Sadly this system doesn’t work for Web Explorer and Safari due to their lack of help for the min-height attribute.
However wait a minute, the approach works in Web Explorer 6, though that browser doesn’t help the min-height attribute (not less than not in response to the W3C specs).
It seems that in the event you set the peak of the physique aspect to 100%, in Web Explorer 6 (in Requirements mode) the container inherits its guardian’s peak (in our case the viewport’s peak). Web Explorer’s incorrect implementation of the default seen worth of the overflow attribute (on Home windows solely) causes our container to stretch up till its content material matches in it, as a substitute of sustaining a hard and fast 100% viewport peak. These two collectively successfully simulate a min-height attribute.
Working round some limitations#section4
Web Explorer 5.x/Home windows at all times renders an internet web page in quirks mode. When you set a block aspect’s peak to 100%, in quirks mode, the aspect makes use of the peak of the viewport. Now in the event you might solely declare a peak of 100% for the container, this may repair the issue from the primary instance and make the approach work in IE5/Home windows too. Be aware that in the event you set the peak of the container to 100%, in requirements mode the footer will at all times keep on the backside of the browser window.
Utilizing the field mannequin hack, you possibly can cross type guidelines to Web Explorer 5.x/Home windows solely. You outline the peak of the container as follows:
#container {
place: relative;
min-height: 100%;
peak: 100%;
voice-family: ""}"";
voice-family: inherit;
peak: auto;
}
html>physique #container {
peak: auto;
}
It’s possible you’ll view the end in instance 3. Instance 3 doesn’t work in Web Explorer 5.x/Mac and Safari, however it degrades gracefully; the footer will at all times be positioned on the backside of the content material block.
Microsoft has stopped growing Web Explorer on the Mac. I hope Apple’s Safari will help the min-height attribute quickly. In the meantime, what if you wish to help Safari or Web Explorer 5/Mac (or, almost certainly, each)? Are there some other alternate options? Humorous you need to ask.
What in regards to the W3C DOM cavalry?#section5
Sadly, the W3C didn’t create any specs on how you can calculate the peak of each browser window or doc parts. They most likely ought to have; requirements exist so browser makers don’t should create these specs themselves. On this case browser makers had been pressured to create their very own proprietary attributes.
So if you wish to use scripting to place parts relative to the browser window, you’re condemned to make use of non-standards-compliant proprietary strategies. The query is: Is it a foul apply to make use of these strategies in an space the place there’s a lack of requirements?
For my part, this is determined by how internally constant these strategies are. If they can fill within the gaps of net requirements and are utilized in a constant means, I feel they need to be handled the identical means as W3C specs.
If in case you have the selection between a pure CSS answer and one that mixes CSS and scripting, it’s smart to make use of CSS solely. In precept, CSS ought to maintain type and JavaScript of habits. Nonetheless particularly within the circumstances the place requirements are supported poorly or appear to be inadequate, utilizing the DOM and JavaScript can enrich the best way you type your net paperwork. On this case, a mix of CSS and scripting strategies will be justified.
Utilizing proprietary DOM to calculate heights#section6
It appears that evidently browser makers had been watching one another once they created their proprietary peak specs. Consequently, proprietary DOM provides us the likelihood to calculate the peak of the browser window and doc parts. Though a number of browsers use totally different objects and properties, the next script will retrieve the window peak of virtually any fashionable browser accurately:
operate getWindowHeight() {
var windowHeight=0;
if (typeof(window.innerHeight)=='quantity') {
windowHeight=window.innerHeight;
}
else {
if (doc.documentElement&&
doc.documentElement.clientHeight) {
windowHeight=
doc.documentElement.clientHeight;
}
else {
if (doc.physique&&doc;.physique.clientHeight) {
windowHeight=doc.physique.clientHeight;
}
}
}
return windowHeight;
}The window.innerHeight property returns the window peak for many fashionable browsers besides Web Explorer. Web Explorer 6 in Requirements mode makes use of doc.documentElement.clientHeight to attain the identical. The doc.physique.clientHeight property returns the window peak for Web Explorer 4+ browsers.
With doc.getElementById(elementId).offsetHeight you possibly can retrieve the peak of any aspect for all fashionable browsers.
Now you possibly can calculate the peak of the browser window and your doc’s parts, you’re able write a operate to place your footer accurately.
Utilizing the W3C DOM to place the footer#section7
Simply since you use JavaScript, this doesn’t imply you can not use CSS for positioning parts. The W3C DOM provides an interface to make use of type guidelines with JavaScript. This implies you possibly can describe JavaScript as if it had been CSS, with the addition of some conditional logic and some peak calculations.
Begin by marking up your web page in its most simplified type, making a content material and a footer block:
<div id="content material">...</div> <div id="footer">...</div>
If the peak of the content material block and the footer collectively is greater than the peak of the viewport, the footer ought to comply with the traditional circulation (static positioning). If this isn’t the case, your script has to place the footer on the backside of the window. With relative positioning, you possibly can transfer the footer downwards relative to its place within the present circulation (you too can use absolute positioning to attain this). Seems like CSS, doesn’t it?
The next operate describes what we simply outlined:
operate setFooter() {
if (doc.getElementById) {
var windowHeight=getWindowHeight();
if (windowHeight>0) {
var contentHeight=
doc.getElementById('content material').offsetHeight;
var footerElement=
doc.getElementById('footer');
var footerHeight=footerElement.offsetHeight;
if (windowHeight-(contentHeight+footerHeight)>=0) {
footerElement.type.place='relative';
footerElement.type.high=(windowHeight-
(contentHeight+footerHeight))+'px';
}
else {
footerElement.type.place='static';
}
}
}
}Dissecting the setFooter() operate#section8
The setFooter() operate first retrieves the peak of the viewport and shops it within the windowHeight variable:
var windowHeight = getWindowHeight();
Second it retrieves the peak of the content material aspect and the footer aspect:
var contentHeight=
doc.getElementById(‘content material’).offsetHeight;
var footerElement=doc.getElementById(‘footer’);
var footerHeight=footerElement.offsetHeight;
Subsequent it decides if the peak of the window is bigger than the mixed peak of the content material and footer:
if (windowHeight-(contentHeight+footerHeight)>=0)
If that is so, it repositions the footer relative (to its place within the regular circulation) on the backside of the web page:
footerElement.type.place=‘relative’;
footerElement.type.high=
(windowHeight-(contentHeight+footerHeight))+‘px’;In the event that they do fill the peak of the window, the aspect is repositioned static to comply with the traditional circulation:
footerElement.type.place='static';
To make all the things work embrace the getWindowHeight() operate in your script and add two features that decision your setFooter() operate in the intervening time our net doc is loaded or resized:
window.onload = operate() {
setFooter();
}
window.onresize = operate() {
setFooter();
}
It’s possible you’ll view the completed model in instance 4. Nonetheless, there may be one little hiccup. Safari is unable to place a component relative (or absolute) when the onload operate is named. To work round this situation, add the next type rule:
#footer {
place: relative;
}
The approach works in all fashionable browsers with out utilizing hacks, a short lived benefit over the CSS solely approach. If a browser can’t calculate one of many heights, if JavaScript is switched off or if a browser doesn’t help JavaScript, the footer will simply comply with the traditional circulation. As you possibly can see, structural mark-up and magnificence are nonetheless separated and your marked-up code didn’t get extra sophisticated. Perhaps scripting tends to be extra verbose than CSS, however not in a big means.
Reusing the idea#section9
Simply by making minor modifications within the CSS logic, you’ve got a number of methods to place your footer. You should use relative-positioned parts solely (instance 5) or absolute positioning (instance 6).
The scripting approach can simply be reused for different vertical positioning duties. Image that you just wish to heart a content material block vertically in your browser window utilizing CSS solely. You would even have achieved this impact by reusing the scripting approach. It’s possible you’ll view the end in instance 7.