Css make child div 100% height and scrollable if necessary

Question

Consider the following stacked divs:

.page {
  height: 100%;
}

.top {
  height: 100%;
  background-color: red;
}

.bottom {
  height: 100%;
  background-color: grey;
}

.options {
  height: 100%;
  overflow: scroll;
}

<div class="page">
  <div class="top">
    <h1>TOP</h1>
  </div>
  <div class="bottom">
    <h1>Options Menu</h1>
    <div class="options">
      <h1>Option 1</h1>
      <h1>Option 2</h1>
      <h1>Option 3</h1>
      <h1>Option 4</h1>
      <h1>Option 5</h1>
      <h1>Option 6</h1>
      <h1>Option 7</h1>
      <h1>Option 8</h1>
      <h1>Option 9</h1>
      <h1>Option 10</h1>
    </div>
  </div>
</div>

How can I change it to allow only the options to scroll, not the page?

second snippet from here: https://stackoverflow.com/a/25098486/8620333 — Temani Afif, Apr 03 '20 at 19:24

Manjuboyz · Answer 1 · 2020-04-03T16:58:38.807

To activate scroll a height value is needed for the list in your case the options class doesn't have the height defined so define a height(as per your need) to the options class.

.page {
  height: 100%;
}

.top {
  height: 100%;
  background-color: red;
}

.bottom {
  height: 100%;
  background-color: grey;
}

.options {
  overflow: scroll;
  height:200px;
}

<div class="page">
  <div class="top">
    <h1>TOP</h1>
  </div>
  <div class="bottom">
    <h1>Options</h1>
    <div class="options">
      <h1>Option 1</h1>
      <h1>Option 2</h1>
      <h1>Option 3</h1>
      <h1>Option 4</h1>
      <h1>Option 5</h1>
      <h1>Option 6</h1>
      <h1>Option 7</h1>
      <h1>Option 8</h1>
      <h1>Option 9</h1>
      <h1>Option 10</h1>
    </div>
  </div>
</div>

No. Height of options class must be as tall as possible, that's why I've used 100%. I don't want it to be fixed at 200px. That's why I've posted que question.... — Mendes, Apr 03 '20 at 17:53

score 0 · Answer 2 · answered Apr 03 '20 at 18:03

When you have more than one sibling div with height:100%, they each take up 100% of the height of the parent div, basically doubling the parent div's height:

html,body{height:100%;margin:0}
h1{margin:0}

.page {
  height: 100%;
}

.top {
  background-color: red;
}

.bottom {
  height: 80%;
  background-color: grey;
}

.options {
  height: 100%;
  overflow: scroll;
  background: lightblue;
}

<div class="page">
  <div class="top">
    <h1>TOP</h1>
  </div>
  <div class="bottom">
    <h1>Options Menu</h1>
    <div class="options">
      <h1>Option 1</h1>
      <h1>Option 2</h1>
      <h1>Option 3</h1>
      <h1>Option 4</h1>
      <h1>Option 5</h1>
      <h1>Option 6</h1>
      <h1>Option 7</h1>
      <h1>Option 8</h1>
      <h1>Option 9</h1>
      <h1>Option 10</h1>
    </div>
  </div>
</div>

Good explanation... But how about the solution? I want the last div to fill the remaining height... — Mendes, Apr 03 '20 at 22:12

score 0 · Answer 3 · answered Apr 03 '20 at 18:09

You would need to set a max-height on the container for the scroll to trigger, Im adding an example here:

.page {
  height: 10vh;
  
}

.top {
  background-color: red;
}

.bottom {
  background-color: grey;
}

.options {
  height: auto;
  overflow-y: scroll;
  background-color: green;
  max-height: 100vh;
}

<div class="page">
  <div class="top">
    <h1>TOP</h1>
  </div>
  <div class="bottom">
    <h1>Options Menu</h1>
    <div class="options">
      <h1>Option 1</h1>
      <h1>Option 2</h1>
      <h1>Option 3</h1>
      <h1>Option 4</h1>
      <h1>Option 5</h1>
      <h1>Option 6</h1>
      <h1>Option 7</h1>
      <h1>Option 8</h1>
      <h1>Option 9</h1>
      <h1>Option 10</h1>
      <h1>Option 11</h1>
      <h1>Option 12</h1>
      <h1>Option 13</h1>
      <h1>Option 14</h1>
      <h1>Option 15</h1>
      <h1>Option 16</h1>
      <h1>Option 17</h1>
      <h1>Option 18</h1>
      <h1>Option 19</h1>
      <h1>Option 20</h1>
    </div>
  </div>
</div>

Hope this is what you are looking for!

Css make child div 100% height and scrollable if necessary

3 Answers3