Высота IE и края 100% ошибка

Question

Я пытаюсь сделать мой div main.wrapper подходящей высотой просмотра, с переполнением. Он работает с Safari и Google Chrome, но при открытии и изменении размера на меньшую высоту с помощью IE или Edge становится ошибкой.

Есть ли способ исправить это и предотвратить правильное содержание, превышающее 100% высоты? Имеет ли Bootstrap эту функциональность, и будет ли проще использовать ее?

The problem (IE and Edge)

JSFiddle

Answer 1

Как об использовании Flexbox вместо этого?

html, body, .app, .left-pane, .right-pane { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.row, .col { 
 
    margin: 0 !important; 
 
    padding: 0 !important; 
 
} 
 

 
.left-pane { 
 
    background: green; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.right-pane { 
 
    background: pink; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.right-pane main { 
 
    flex: 1; 
 
    overflow-y: auto; 
 
} 
 

 
.right-pane main .wrapper { 
 
    height: 100%; 
 
} 
 

 
.right-pane main .wrapper { 
 
    overflow: auto; 
 
} 
 

 
header { 
 
    flex: 0 1 50px; 
 
    max-height: 50px; 
 
    background: blue; 
 
} 
 

 
footer { 
 
    flex: 0 1 50px; 
 
    max-height: 50px; 
 
    background: yellow; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet"/> 
 
<div class="row app"> 
 
    <div class="col s4 left-pane"> 
 
     <header>header left</header> 
 
     body left 
 
    </div> 
 
    <div class="col s8 right-pane"> 
 
     <header>header right</header> 
 
     <main> 
 
      <div class="wrapper"> 
 
       <p>main</p> 
 
       <p>main 2</p> 
 
       <p>main 3</p> 
 
       <p>main 4</p> 
 
       <p>main 5</p> 
 
       <p>main 6</p> 
 
       <p>main 7</p> 
 
       <p>main 8</p> 
 
       <p>main 9</p> 
 
       <p>main 10</p> 
 
      </div> 
 
     </main> 
 
     <footer>footer</footer> 
 
    </div> 
 
</div>