Since it would be difficult to include all the code here, briefly describe the problem (and some processed fragments later): there this DIV element with the display is not installed, which appears, setting the display to a block (in some onclick event --- like a menu). Since the contents of this DIV is lager than the whole page, when the DIV.style.display == block is, the browser adds a vertical scroll bar to its window - and this is wonderful. Well, I decided to set max-height and overflow-y on this DIV, but the DIV has a good vertical scroll bar on its own (it works as expected), the browser - in particular, IE11 --- still adds vertical scrolling - a bar in a window, as in the previous case. You can use it to scroll the entire page, but without a visible dot (there is simply no content at the bottom of the window to scroll).
This is how it looks (more or less) in the code. CSS first:
div.mydiv {
display: none;
position: absolute;
border-width: 1px 0px 0px 0px;
border-color: #BBBBBB black black black;
border-style: solid solid solid solid;
border-radius: 0px 0px 5px 5px;
background-color: white;
padding: 4px;
line-height: 11px;
font-size: 10px;
font-weight: normal;
color: #FFFFFF;
opacity: 1;
left: -6px;
top: 12px;
cursor: default;
box-shadow: 1px 1px 3px #888888, -1px 1px 2px #EEEEEE;
z-index: 1600;
}
Now HTML:
<div class="mydiv" style="overflow-y: scroll; max-height: 300px;">...</div>
In FireFox, it works as expected, i.e. A DIV gets its vertical scrollbar if the maximum height of this DIV is greater than 300 pixels, and the browser does not add a vertical scrollbar to the window. In IE11, the DIV also gets its scrollbar, but also has a browser window (only if the DIV is displayed, i.e. div.style.display == block). Any ideas how to get rid of this browser behavior?
UPDATE: here is a fiddle to demonstrate this & mdash; notice the vertical scroll bar in the Result frame that appears when the list is displayed.