How to position a div at the bottom of the viewport in standard and in quirks mode ??

views:

127

answers:

+1 Q:

How to position a div at the bottom of the viewport in standard and in quirks mode ??

Hi, I need to position a div to the bottom of my viewport. I start using position:fixed; bottom:0px; and that work just fine. But the thing that I'm working on gets injected via javascript in different pages. And some of the pages doesn't have a doctype defined, so in IE gets rendered like quircks mode, so the div doesn't get positioned correctly..
I've tried to position the div using javascript (document.documentElement.clientHeight) and that works fine. But when no doctype is defined, the "document.documentElement.clientHeight" is 0, so again the div doesn't get positioned correctly. Any idea on how to fix this problem? I'm only interested in IE 7 and 8.

Thanks in advance Gonzalo

Though I agree with the comments stating that you should better ensure that every page is served with a (valid) doctype that triggers standards mode (and you can't change this nor the rendering mode on-the-fly), you can test whether you're in standards mode or in quirks mode using document.compatMode. This property returns either CSS1Compat when using the former or BackCompat when using the latter.

In standards mode, you can just use a <div> with position: fixed and bottom: 0 (in IE 7 and 8). When using quirks mode, you'll have to use an absolutely positioned <div> above an absolutely positioned viewport <div> (where <body> and <html> have a height of 100%). I'm too tired now to write a full example, but you can look at this answer to see how this can be done. Note that in IE's quirks mode document.body.clientHeight returns the height of the viewport (also see Finding the size of the browser window).

Marcel Korpel 2010-05-31 22:15:38

Thanks for the replies. I know that all pages should have a doctype but my code gets injected in all kind of pages and I can't controle those pages. I've use document.body.clientHeight to position the div when we are in quirks mode. But it still doesn't work they way it should. Here is a simple example:

test page *{padding:0px; margin:0px; }
#miDiv{position:absolute;width:100%;height:35px;background-color:Aqua;} #miDiv ul li{float:left;width:300px;height:35px;margin-left:50px;background-color:Yellow;} *{padding:0px; margin:0px; }
#miDiv{position:fixed;bottom:0px; width:100%;height:35px;background-color:Aqua;} #miDiv ul li{float:left;width:300px;height:35px;margin-left:50px;background-color:Yellow;}

panel 1
panel 2
panel 3

function chalo() { var midiv = document.getElementById('miDiv'); miDiv.style.top = document.body.clientHeight - 35 + 'px'; } window.onload = chalo; window.onresize = chalo;

In firefox I use position fixed and in explorer I use javascript. If you see it in firefox it work's fine. When you resize (to a smaller width) the panels that have no space "disappears" (below my viewport). In Explorer it looks fine but when you scroll down you'll see the rest of the panels. I don't want that. Is there anyway to fox this??

thanks

Gonzalo 2010-06-01 18:19:59

ansaurus

tags:

views:

answers:

How to position a div at the bottom of the viewport in standard and in quirks mode ??

related questions