All geek questions in one place

IE9 DIV Reduction on Overflow: Auto Scroll Appears

I have a little problem getting everything to work right on my website using Internet Explorer. One of my problems: I have a div that has one overflow:auto.

As soon as I make my window small enough so that the overflow can affect, the div for some reason shrinks a bit. Does anyone know why this would be?

Pagewidth:100% . Pay attention to the red frame on the left and right. enter image description here

Page times overflow:autoaffects - the red border div is compressed enter image description here

Red Border 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;
}
+4
source share
4 answers

. IE10 +, FF Chrome, IE9. :

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

, , : border-box , , dGrid IE9.

+4

- "BORDER", , . .

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

Try it, work fine in IE8 / IE9.

Updated several 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>
0
source

The reason the div was squeezed was due to position:absolute. Removing this solution to the problem in IE 9.

0
source

Source: https://habr.com/ru/post/1539842/

More articles:


All Articles