IEとエッジの高さ100％のバグ

Question

私はdivをオーバフローでビューポートの高さに合わせようとしています。 SafariとGoogle Chromeで動作していますが、IEやEdgeを使用して開かれ、小さな高さにサイズ変更されると、バグになります。

これを修正し、正しいコンテンツが100％の高さを超えないようにする方法はありますか？ブートストラップにはこの機能がありますか？使用すると簡単になりますか？代わりにフレキシボックスを使用する方法について

The problem (IE and Edge)

JSFiddle

Answer 1

どのように？私がまさに必要だった

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>