IE11, abs pos and overflow

by agib

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="wrapper">
<div class="panel panel-primary">
  <div class="panel-heading">Panel left</div>
  <div class="panel-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin rutrum justo, nec consectetur nisi dignissim non. Donec tempus condimentum nisi sit amet auctor. In eu velit libero. Morbi commodo eu risus ut vulputate. Ut vitae augue mattis, cursus tortor quis, suscipit felis. Sed volutpat tempus dui, id malesuada ligula dapibus et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam eu elit eget justo dapibus dictum. Proin lorem metus, placerat a velit a, euismod egestas felis. Cras lacus nunc, tristique vitae lobortis non, venenatis vel ipsum.

Donec mattis tincidunt ipsum ut hendrerit. Fusce malesuada varius dui eu consequat. Morbi sit amet mauris nec enim tincidunt venenatis. Quisque at vestibulum velit, non pellentesque est. Nunc erat purus, imperdiet id varius in, dapibus a dui. Aenean vel massa imperdiet, auctor justo ac, pharetra nibh. Etiam pellentesque mi ante, vitae elementum ipsum suscipit vel. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Aliquam eget urna ipsum. Aliquam nec nunc nisi. Donec at gravida eros, id luctus eros. Sed rhoncus massa vel orci accumsan porttitor. Nulla facilisi. Phasellus vestibulum vehicula malesuada. Sed faucibus, augue vitae volutpat pellentesque, orci arcu dictum sem, nec sollicitudin eros erat et ante. Etiam at cursus nibh. Nullam tempor nisl vel massa facilisis tristique. Duis risus arcu, aliquet id elit ac, commodo cursus massa.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit faucibus justo, vel tincidunt turpis dapibus at. Vestibulum malesuada sit amet erat quis pellentesque. Vivamus lectus justo, fermentum sit amet laoreet sit amet, malesuada et lorem. Ut vel diam maximus, pulvinar sapien vel, auctor...

CSS

html,
body {
    height: 100%;
    overflow: hidden;
}
.wrapper {
    display: table;
    width: 100%;
    height: 100%; 
}
.panel {
    display: table-cell;
    position: relative;
}
.panel-body {
    background-color: #ddd;
    position: absolute;
    top: 40px;
    right: 0;
    bottom: 40px;
    left: 0;
    overflow-y: auto;
}
.panel-footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
}