Fold Control: Browser-Bottom Alignment
Posted by Andrew Lindstrom / Tutorials / July 31st, 2008
The original wellmedicated layout, before it was recently rebooted, had a rather high-concept design. The basic idea being: “every website aligns to the top of the browser, I want mine to align to the bottom”…arrogant, I know. Not surprisingly, this was easier said than done. However, I did manage to figure out a way to pull it off by modifying some javascript from this a list apart article.
The final result is a script that detects the height of your browser and the height of your content “above the fold” (in pixels) and then offsets said content the difference of the two.
The Preview
Before we proceed, you should probably test drive the script and see if it’s right for you.
The HTML
This is pretty run-of-the-mill HTML, nothing too crazy. The main thing worth noting is the DIV with the ID of “spacer”. This is basically an empty DIV that will bump the actual content down.
The DIV’s “abovefold” and “belowfold” are the containers you place your content in that you want above and below the fold* respectively.
<body>
<div id="spacer"><!-- --></div>
<div id="abovefold">
<div id="top-content">
<p>Above the fold text goes here.</p>
</div>
</div>
<div id="belowfold">
<div id="bottom-content">
<p>Below the fold text goes here.</p>
</div>
</div>
</body>*The fold being the division of what you see and what you have to scroll to see when you load any website.
The CSS
The #abovefold and #belowfold DIVs are both absolute positioned with widths of 100%. This fixes a problem I was having with centering the content DIVs.
The #top-content and #bottom-content DIVs are for example purposes only, you may remove or rename these to whatever you like.
Background colors that are used are just to visually represent the effect and are by no means necessary.
#abovefold {
width: 100%;
position: absolute;
background-color: #ddd;
}
#belowfold {
width: 100%;
position: absolute;
background-color: #aaa;
}
#top-content {
margin: 0 auto;
width: 400px;
background-color: #ccc;
}
#bottom-content {
margin: 0 auto;
width: 400px;
background-color: #999;
}The Javascript
I must confess that though I can feel my way around, I am hardly a javascript programmer. I wouldn’t be surprised if there was a way to achieve this effect with 2 lines of code – but I googled my fingers off trying to find such a solution and came up empty-handed.
The bulk of this code was provided from the a list apart article I mentioned earlier with some modifications and tweaks by yours truly.
<!--
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setAbovefold() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentHeight = document.getElementById('spacer').offsetHeight;
var abovefoldElement = document.getElementById('abovefold');
var belowfoldElement = document.getElementById('belowfold');
var abovefoldHeight = abovefoldElement.offsetHeight;
if (windowHeight - (contentHeight + abovefoldHeight) >= 0) {
abovefoldElement.style.position = 'absolute';
abovefoldElement.style.top = (windowHeight - abovefoldHeight) + 'px';
belowfoldElement.style.position = 'absolute';
belowfoldElement.style.top = (windowHeight) + 'px';
}
else {
abovefoldElement.style.position = 'static';
belowfoldElement.style.position = 'static';
}
}
}
}
window.onload = function() {
setAbovefold();
}
window.onresize = function() {
setAbovefold();
}
//-->The Source Files
I know, I know. Enough Jibba-jabba already! Here’s the sources files of what this mess of an article is all about. Download ’em, muck around with ’em and improve upon ’em.
Download the source files here.
This has been cross-browser tested on Firefox 2+, IE 6+, Safari 3+ & Opera 9+. In the unlikely event of a browser resizing, everything will realign automagically. If there is too much content to fit above the fold, then the effect is lost and the page renders as per usual.
Yo, I'm Andrew Lindstrom. I am a freelance web designer based in Vancouver, Canada. When not geeking out over design, I'm likely geeking out over film, technology or pretending to play the guitar.