製作可滾動的div 100％的父容器高度

Question

我有兩個完整高度的列在bootstrap中，我想在一列中顯示一堆面板。 （使用這個So thread來自AndreDurao的全高列答案）當我有大量面板時，我不希望整個頁面滾動，因此我使面板父容器元素可滾動，但是當我嘗試將高度設置爲100％，所以面板滾動，但不是整個頁面，它不適用於IE瀏覽器！它在Chrome中很棒（只是內部div卷軸），但是在IE中整個頁面都會滾動。這兩款瀏覽器之間爲何有所不同，這可以解決嗎？

僅供參考 - 我試過overflow-y：auto，但是也沒有工作。我可以看到面板div的滾動條，但它是灰色的，就像它被禁用。使用IE 11，它看起來像Edge有相同的問題/錯誤！

這是我bootply和我的代碼

html, body { 
 
      height: 100%; 
 
      /*border: 1px solid red;*/ 
 
     } 
 

 
     .table-container { 
 
      height: calc(100% - 53px); 
 
      /*border: 1px solid green;*/ 
 
     } 
 

 
     nav.navbar { 
 
      margin: 0; 
 
     } 
 

 
     .table-container { 
 
      display: table; 
 
      width: 100%; 
 
      padding-left: 0px; 
 
      padding-right: 0px; 
 
     } 
 

 
     .table-container .table-row { 
 
      height: 100%; 
 
      display: table-row; 
 
     } 
 

 
     .table-container .table-row .table-col { 
 
      display: table-cell; 
 
      float: none; 
 
      vertical-align: top; 
 
     } 
 
     #eventsContainer { 
 
      height: 100%; 
 
     }

<div class="container table-container"> 
 
    <div class="row table-row"> 
 
     <div class="col-sm-6 table-col"></div> 
 
     <div class="col-sm-6 table-col" style="border: 1px solid red;"> 
 
      <div id="eventsContainer" style="overflow-y: scroll;"> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-body"> 
 
         Basic panel example 
 
        </div> 
 
       </div> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-body"> 
 
         Basic panel example 
 
        </div> 
 
       </div> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-body"> 
 
         Basic panel example 
 
        </div> 
 
       </div> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-body"> 
 
         Basic panel example 
 
        </div> 
 
       </div> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-body"> 
 
         Basic panel example 
 
        </div> 
 
       </div> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-body"> 
 
         Basic panel example 
 
        </div> 
 
       </div> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-body"> 
 
         Basic panel example 
 
        </div> 
 
       </div> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-body"> 
 
         Basic panel example 
 
        </div> 
 
       </div> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-body"> 
 
         Basic panel example 
 
        </div> 
 
       </div> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-body"> 
 
         Basic panel example 
 
        </div> 
 
       </div> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-body"> 
 
         Basic panel example 
 
        </div> 
 
       </div> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-body"> 
 
         Basic panel example 
 
        </div> 
 
       </div> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-body"> 
 
         Basic panel example 
 
        </div> 
 
       </div> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-body"> 
 
         Basic panel example 
 
        </div> 
 
       </div> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-body"> 
 
         Basic panel example 
 
        </div> 
 
       </div> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-body"> 
 
         Basic panel example 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

試試這個：

檢查演示Here

HTML：

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
     <form class="navbar-form navbar-left"> 
     <div class="form-group"> 
      <input class="form-control" placeholder="Search" type="text"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div> 
    <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
</nav> 
<div class="container-fluid"> 
    <div class="row table-row"> 
    <div class="col-sm-6 table-col">nav</div> 
    <div class="col-sm-6 table-col" style="border: 1px solid red;"> 
     <div id="eventsContainer"> 
     <div class="panel panel-default"> 
      <div class="panel-body"> 
      Basic panel example 
      </div> 
     </div> 
     <div class="panel panel-default"> 
      <div class="panel-body"> 
      Basic panel example 
      </div> 
     </div> 
     <div class="panel panel-default"> 
      <div class="panel-body"> 
      Basic panel example 
      </div> 
     </div> 
     <div class="panel panel-default"> 
      <div class="panel-body"> 
      Basic panel example 
      </div> 
     </div> 
     <div class="panel panel-default"> 
      <div class="panel-body"> 
      Basic panel example 
      </div> 
     </div> 
     <div class="panel panel-default"> 
      <div class="panel-body"> 
      Basic panel example 
      </div> 
     </div> 
     <div class="panel panel-default"> 
      <div class="panel-body"> 
      Basic panel example 
      </div> 
     </div> 
     <div class="panel panel-default"> 
      <div class="panel-body"> 
      Basic panel example 
      </div> 
     </div> 
     <div class="panel panel-default"> 
      <div class="panel-body"> 
      Basic panel example 
      </div> 
     </div> 
     <div class="panel panel-default"> 
      <div class="panel-body"> 
      Basic panel example 
      </div> 
     </div> 
     <div class="panel panel-default"> 
      <div class="panel-body"> 
      Basic panel example 
      </div> 
     </div> 
     <div class="panel panel-default"> 
      <div class="panel-body"> 
      Basic panel example 
      </div> 
     </div> 
     <div class="panel panel-default"> 
      <div class="panel-body"> 
      Basic panel example 
      </div> 
     </div> 
     <div class="panel panel-default"> 
      <div class="panel-body"> 
      Basic panel example 
      </div> 
     </div> 
     <div class="panel panel-default"> 
      <div class="panel-body"> 
      Basic panel example 
      </div> 
     </div> 
     <div class="panel panel-default"> 
      <div class="panel-body"> 
      Basic panel example 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

CSS：

html, 
body { 
    height: 100%; 
    /*border: 1px solid red;*/ 
} 

nav.navbar { 
    margin: 0; 
} 

.table-row { 
    height: calc(100vh - 53px); 
    display: flex; 
} 

.table-col { 
    display: flex; 
    width: 100%; 
} 

#eventsContainer { 
    height: 100%; 
    overflow: auto; 
    position: absolute; 
    width: calc(100% - 15px); 
} 

我在Firefox，Chrome和IE（邊緣），它的工作原理檢查..

我希望這有助於你