Search code examples
htmlcssscrollheightfixed

Fixed, 100% height div Causing Window to Grow

I'm trying to create a div that will sit to the left of a forum and fill 100% of the browser window's height. It will also stay in a fixed position as you scroll.

The code I have so far works just fine in Chrome and FF; however, in IE, when you continue to scroll down the page, the scrollbar expands as though the page is growing.

#sidebar {
   background-color: #a75143;
   width: 240px;
   height: 100%;
   position: fixed;
   _position:absolute;
   top: 0;
   _top:expression(eval(document.body.scrollTop));
   left: 0;
   bottom: 0;
}

I know what causes it-- _top:expression(eval(document.body.scrollTop)); --but this is also what keeps the div in a fixed position in IE.

Additionally, overflow: hidden has no effect.

If you'd like an idea of what I'm talking about, open this page in Internet Explorer.

Any help would be appreciated. Thanks!

Solution

  • You should not need that expression even for IE.

    The below works fine for me...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en">
<head>

    <style type="text/css">
        #sidebar {
           background-color: #a75143;
           width: 240px;
           height: 100%;
           position: fixed;
           top: 0;
           left: 0;
           bottom: 0;
        }
    </style>

</head>

<body>
    <div id="sidebar"></div>
</body>
</html>