Making scrollable div 100% height of parent container

Question

I have two full height columns in bootstrap where I want to render a bunch of panels in the right column. (used this So thread for full height columns answer from AndreDurao) I don't want the whole page to scroll when I have a large number of panels so I make the panels parent container element scrollable, but when I try to set the height to 100%, so that the panels scroll but not the whole page, it doesn't work right in IE! It works great in Chrome (just the inner div scrolls), but in IE the whole page scrolls. Why is it different between the 2 browsers and can this be fixed?

FYI - I tried overflow-y: auto but that didn't work either. And I can see the scroll bar for the panels div but it's greyed out like it's disabled. Using IE 11 and it looks like Edge has the same problem/bug!

Here is my bootply and my 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>

IE version? it might give some clue to css master out there. — Bagus Tesa, Dec 27 '16 at 01:00
IE 11 is the browser I'm using, haven't tried it with Firefox or Edge — chuckd, Dec 27 '16 at 01:11
Well, don't use `display: table.` http://www.bootply.com/Yua6ZOsYPf — pol, Dec 27 '16 at 01:31
The bug also doesn't occur if you use a unit other than % such as vh or a pixel based height. Using vh is will require some additional tweaking of styles so that the header doesn't cause overflow. — Brian, Dec 27 '16 at 01:51

score -1 · Accepted Answer · edited Jun 20 '20 at 09:12

Try this:

Check 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);
}

I checked in firefox, chrome and IE(edge), it works..

I hope this helps you

Making scrollable div 100% height of parent container

1 Answers1