In CSS, I have some pages that only ask for a few bits of information, and some that ask for a lot. In both cases, I use the following CSS:
#body {
min-height: 750px;
}
(And on IE6, I have to have a special CSS that reads: #body {height: 750px;}, but that's beside the point.)
The net effect of this is that it sort of keeps an even footer starting at 750px down the screen, or greater if the page is longer. The downside is when the case where someone has one of these widescreen laptops, which is becoming more and more common these days. For them, they end up seeing a lot of white space down the page, so they are inclined to scroll. When they go down, they don't see anything there.
So what's the fix? I mean, is there any way I can read the browser's headers on the home page of my site and make a guesstimate whether the user has a small vertical space or not and then switch CSS based on that?
CSS Problem With Large Pages -- A Preference Question
Moderator: General Moderators
-
jack_indigo
- Forum Contributor
- Posts: 186
- Joined: Sun Jun 08, 2008 11:25 pm
-
jack_indigo
- Forum Contributor
- Posts: 186
- Joined: Sun Jun 08, 2008 11:25 pm
Re: CSS Problem With Large Pages -- A Preference Question
Here's what I ended up with:
Code: Select all
<div id="body">
<script>
var gScreenWidth = 0, gScreenHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
gScreenWidth = window.innerWidth;
gScreenHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
gScreenWidth = document.documentElement.clientWidth;
gScreenHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
gScreenWidth = document.body.clientWidth;
gScreenHeight = document.body.clientHeight;
}
if (gScreenHeight < 700) {
var oBody = document.getElementById('body');
oBody.style.minHeight = '520px';
try {
document.all.body.style.minHeight = '520px';
} catch(ignore) {}
}
</script>
...rest of page.