Scrollable full height div

Question

How can I achieve a full height page app with a div that takes up remaining height under banner and uses scroll for the remainder.

The middle div is the one I need to scroll, as shown in this fiddle.

Link to JSFiddle

html {
  height: 100%;
}

body {
  margin: 0px;
  display: flex;
  flex-direction: column;
}

.section {
  display: flex;
}

.content {
  background: gold;
  overflow: scroll;
  flex: 1;
}

.left {
  background: tomato;
}

.right {
  background: lightgreen;
}

<body>
  <div>
    header banner
  </div>
  <div class="section">
    <div class="left">
      should always fill remaining height (Works)
    </div>
    <div class="content">
      main content: fills remaining space then overflows with scrollbar (doesnt work)<br> x
      <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x
      <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>

    </div>
    <div class="right">
      should always fill remaining height (Works)
    </div>
  </div>

</body>

Much appreciated

Try to use `max-height`, `vh max-height`, and `overflow`, `.needToScroll { height: 100%; max-height: 100vh; overflow: auto;}` — Ali Yaghoubi, Oct 31 '21 at 02:40
In your `.content` block, adding `max-height: calc(100vh - 20px)` worked for me. Also changed `overflow: auto;` since it looks better to me. The 20px was for the header. — user2740650, Oct 31 '21 at 02:52
@user2740650 Thanks! My actual header (not the minimal jsfiddle reproduction) doesn't have a specified height. Do you have any ideas for how to do it when the height is unknown? Thanks — slaw, Oct 31 '21 at 03:35
`html { height: 100%; }` is an useless statement. `height: 100%` means to occupy 100% of the aprent height. However this require that the parent has a defined height. Not a calculated height to fit the content. And right there is the issue, `html` has no parent element. Unless you give it a specific height, it will calculate the height to fit-content — tacoshy, Oct 31 '21 at 03:59
Without hard-coding the header height, I'm not sure how with pure CSS. This might help: http://jsfiddle.net/7yLFL/445/ (from a comment at https://stackoverflow.com/a/25098486). — user2740650, Oct 31 '21 at 14:21

score 1 · Accepted Answer · answered Oct 31 '21 at 05:00

If the header's height is set with CSS, you can set .content to take up the full height of the viewport (100vh) minus the height of the header using the calc function.

.header {
  height: 20px;
}

.content {
  height: calc(100vh - 20px);
}

If the header's height can change depending on its contents, you can use javascript to set .content's height on page load and resize.

function setContentHeight() {
  let header = document.querySelectorAll('.header')[0];
  let content = document.querySelectorAll('.content')[0];
  if (header && content) {
    content.style.setProperty('height', 'calc(100vh - ' + header.offsetHeight + 'px)');
  }
}

document.addEventListener('ready', function() {
    setContentHeight();
    window.addEventListener('resize', setContentHeight);
});

Scrollable full height div

1 Answers1