CODEWITHSUNDEEP
javascripthtmlcss
bryan
bryan

Reputation: 9369

IE9 Shrinking DIV on overflow:auto scrollbar appearance

I'm having a little bit of trouble getting everything to work right on my website with internet explorer. One of my problems is, I have a div that has overflow:auto.

Once I make my window small enough for the overflow to take affect, the div shrinks a tad bit for some reason. Does anyone know why this would be?

The Page width:100% - Note the red border on the left and right. enter image description here

The Page once overflow:auto takes affect - Red bordered div shrinks enter image description here

The Red Bordered Div

.content {
   width:100%;
   background-color:#F1F2F7;
   position: absolute;
   padding:0 0 120px 0;
   z-index:2;
   overflow:auto;
   height:100%;
   border:1px solid red;
}

Upvotes: 4

Views: 2518

Answers (4)

Robin Balmforth
Robin Balmforth

Reputation: 231

I had a similar problem to this. The scroll bar was correctly positioned in IE10+, FF and Chrome, but inset like your screenshot in IE9. This was the fix:

    .dgrid-scroller {
        box-sizing: content-box;
    }

Our project, like many, normalized all elements to box-sizing:border-box and that appears to cause problems for the dGrid measurement code in IE9.

Upvotes: 4

bryan
bryan

Reputation: 9369

The reason for the div shrinking was because of position:absolute. Removing this solved the problem in IE 9.

Upvotes: 0

Dharam Mali
Dharam Mali

Reputation: 959

Try this, Working fine in IE8/IE9.

Updated few properties in CSS:

<html>
<head>
<title>IE 9 Scrollbar</title>
<style>
body { margin:0; padding:0; overflow-y:scroll;}
.content {
   width:100%;
   background-color:#F1F2F7;
   position: absolute;
   padding:0 0 120px 0;
   z-index:2;
   overflow:auto;
   height:100%;
}
</style>
</head>
<body>
    <div class="content">
        test
    </div>
</body>
</html>

Upvotes: 0

Dharam Mali
Dharam Mali

Reputation: 959

It is due to "BORDER", remove border and keep everything else as it is. It will work.

.content {
   width:100%;
   background-color:#F1F2F7;
   position: absolute;
   padding:0 0 120px 0;
   z-index:2;
   overflow:auto;
   height:100%;
}

Upvotes: 0

Related Questions