IE和邊緣高度100％的bug

Question

我想讓我的div main.wrapper適合視口高度，溢出。它正在使用Safari和谷歌瀏覽器，但使用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>