CODEWITHSUNDEEP
htmlcssscrollheightfixed
elli mccale
elli mccale

Reputation: 206

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!

Upvotes: 0

Views: 1263

Answers (2)

elli mccale
elli mccale

Reputation: 206

I was able to solve this on my forum with some conditional CSS and the non-valid declarations. However, Jeremy's solution above works best outside of ProBoards.

html, body { height: 100%; }
#sidebar {
   background-color: #a75143;
   width: 240px;
   height: 100%;
   position: fixed;
   _position:absolute;
   top: 0;
   _top:expression(eval(document.body.scrollTop));
   left: 0;
   bottom: 0;
}
</style>
<!--[if IE]>
<style type="text/css">
#sidebar-container { min-height: 100%; overflow: hidden; }
</style>
<![endif]-->

<div id="sidebar-container">
   <div id="sidebar">
      some content
   </div>
</div>

Upvotes: 0

Jeremy A. West
Jeremy A. West

Reputation: 2300

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>

Upvotes: 1

Related Questions