Scrollbare div machen 100% Höhe des übergeordneten Containers

Question

Ich habe zwei volle Höhe Spalten im Bootstrap, wo ich eine Reihe von Panels in der rechten Spalte rendern wollen. (verwendet so So thread für volle Höhe Spalten Antwort von AndreDurao) Ich möchte nicht die ganze Seite scrollen, wenn ich eine große Anzahl von Panels habe, so dass ich die Panels übergeordneten Container-Element scrollbar machen, aber wenn ich versuche, die Höhe einzustellen 100%, damit die Panels aber nicht die ganze Seite scrollen, funktioniert es im IE nicht richtig! Es funktioniert hervorragend in Chrome (nur die inneren Div Scrolls), aber im IE scrollt die ganze Seite. Warum unterscheidet es sich zwischen den 2 Browsern und kann dies behoben werden?

FYI - Ich versuchte Überlauf-y: Auto, aber das hat auch nicht funktioniert. Und ich kann die Bildlaufleiste für die Panels div sehen, aber es ist ausgegraut, als wäre es deaktiviert. Mit IE 11 und es sieht aus wie Edge hat das gleiche Problem/Bug!

Hier ist meine bootply und meinen Code

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

Versuchen Sie folgendes:

prüfen Demo 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); 
} 

ich in Firefox, Chrome und IE (Rand) überprüft, es funktioniert ..

Ich hoffe, das Sie