Simulating Position: Fixed in Ie6 with a Div of 100% Height

IE 6 vs. position:fixed

Don't support IE6! The sooner people stop hacking sites about for IE6, the less traction it will have and the quicker it will die! Or, add this code after your first style block;

<!--[if IE 6]>  
<style type="text/css">  
#sidebar_right, #sidebar_left {  
position:absolute; /* position fixed for IE6 */  
top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');  
left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');  
}  
</style>  
<![endif]-->

The result isn't super-smooth, but it does work.

UPDATE

I wasn't too clear on how this should be used; simply add the id (or class) of any elements that have "position:fixed" to the declaration list at the start of the above block and they will behave themselves in IE6.

How to make a div 100% of page (not screen) height?

If you change position: absolute to position: fixed it will work in all browsers except IE6. This fixes the div to the viewport, so it doesn't move out of view when scrolling.

You can use $(document).height() in jQuery to make it work in IE6 too. E.g.

$('.screenMask').height($(document).height());

That would obviously fix it for all the other browsers too, but I prefer not using JavaScript if I can avoid it. You'd need to do the same thing for the width too, actually, in case there's any horizontal scrolling.

There are plenty of hacks around to make fixed positioning work in IE6 too, but they tend to either impose some other limitations on your CSS, or use JavaScript, so they're likely not worth the trouble.

Also, I presume you have only one of these masks, so I'd suggest using an ID for it instead of a class.

Simulate position:fixed in jQuery

You can wrap the element with a static positioned DIV to get scrollbars and then listen for the window scroll and position the fixed header according to the scrollLeft value:

var elem = $('#headertable');
var win  = $(window);
var wrap = $('<div>').css({
    width: elem.width(),
    height: elem.height()
});
elem.wrap(wrap);
win.scroll(function() {
    elem.css('left', win.scrollLeft()*-1);
});

Seems to work in IE/FF/Chrome:

http://jsbin.com/efuya3

Absolute DIV height 100%

Well it looks to me that your element with all the content is floated. If it is then its not going to expand the body unless it is cleared.

floating bar javascript (prototype or scriptaculous)

position:fixed

see also: Simulating position: fixed in IE6 with a div of 100% height?

Fulfilling strange requirements with CSS (kind of simulating frames)

UPDATED:

i have found this article

• http://www.alistapart.com/articles/conflictingabsolutepositions/

just CSS & HTML i think is what you are looking for!

FINAL DEMO: http://jsbin.com/icemo3/24

In responce to your last comment, i have worked out this solution that require also a bit of jquery (javascript) please see the demo and use the demo code!

$(window).load(function() {
getWindowProportion()
});

$(window).resize(function() {
getWindowProportion()
});

function getWindowProportion() {
 $('#wrapper').attr('style', 'width:' + $(window).width() + 'px');
    $('#header').attr('style', 'height:200px;width:' + $(window).width() + 'px');
    $('#navigation').attr('style', 'height:' + ($(window).height() - 200) + 'px;top:200px;width:300px');
    $('#content').attr('style', 'width:' + ($(window).width() - 300) + 'px;top:200px;height:' + ($(window).height() - 200) + 'px;left:' + ($('#navigation').width()) + 'px');
};

---

CSS DEMO 2: http://jsbin.com/icemo3/2

CSS DEMO 3: http://jsbin.com/icemo3/3

* { margin:0; padding:0 }
html, body { margin:0; padding:0;  position:relative; overflow:auto; width:100%;  height:100%; }
#content { float:left; width:  80%; background: cyan; height:80%;  top:20%; left:20% }
#navigation { float:left; width:  20%; background: green; height:80%;  top:20% }
#header {  width:  100%; background: red; height:20%; }
.scrollme { margin:0; padding:0; overflow: auto;  position:absolute; }
p { margin:10px }

<div id="header" class="scrollme"><p>some text here</p></div>
<div id="navigation" class="scrollme"><p>some text here</p></div>
<div id="content" class="scrollme"><p>some text here</p></div>

NOTE:

tested on: 
IE6+
Chrome
Firefox
Opera

1. each section have its own scroll-bar!
2. each section have 100% width and height!
3. no browser window scroll-bar appear!
4. each section always retain its proportion
5. work on all screen resolution

---

Related Topics