Bottom div to occupy remaining space with vertical scroll

user_480391 0
Viewed 180

.ListContainer {
     overflow-y: scroll;
     height: 500px;
    }
    <h1>Some header</h1>
    <div>Some panel</div>
    <div class="ListContainer">ui-office-fabric grid here</div>

I need to have ListContainer div to occupy the rest of the vertical space until the bottom, so scrolling inside that div will reveal hidden items. Fixed height is no good because monitors have different resolutions. So with higher resolution there will be a blank space below the div.

I tried specifying height: calc(100% - 240px) but it has no effect.

Any suggestions?

reactjs css html javascript
2 Answers

This is what you mean?

height: calc(100vh - 240px);
user_140538560

You need a container that has the height you need, in this case 100vh. And then, you can use flexbox, and make sure your list container grows as needed.

.main {
  height: 100vh;
  border: 1px solid red; /** This is just for testing **/
  display: flex;
  flex-direction: column;
}

.ListContainer {
   overflow-y: scroll;
   border: 1px solid black; /** This is just for testing **/
   flex-grow: 1;
}
<div class="main">
  <h1>Some header</h1>
  <div>Some panel</div>
  <div class="ListContainer">
    ui-office-fabric grid here<br>
    ui-office-fabric grid here<br>
    ui-office-fabric grid here<br>
    ui-office-fabric grid here<br>
    ui-office-fabric grid here<br>
    ui-office-fabric grid here<br>
    ui-office-fabric grid here<br>
    ui-office-fabric grid here<br>
  </div>
</div>

user_19939560
Related