htmlcssflexbox

CSS Layout: Fixed header/footer and sub-header within content

I am working on a web application and want to have the following layout:

<div class="wrapper">
    --header--
    <div class="header">
    </div>
    --body--
    <div class="content">
        --header within body--
        <div class="sub-header">
        </div>
        ---scrollable content-
        <div class="scrollable-content">
        </div>
    </div>
    --footer--
    <div class="footer">
    </div>
</div>

CSS:

.wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.header {
    flex: 0 0 auto;
}

.content {
    overflow-y: scroll;
    flex: 0 1 auto;
}

I want to assign the remaining height with scroll to the "scrollable-content" div. I have come across answers where the entire content is scrollable, but that's not the case here.

Any help would be great

Solution

  • Here I have used shorthand css property flex to determine height of each <div> and set the overflow: scroll;. Hence other elements doesn't scroll on overflow of that element.

    .wrapper {
  border: 1px red solid;
  height: 300px;
  display: flex;
  flex-direction: column;
  flex-wrap: no-wrap;
}

.header {
  border: 1px red solid;
  flex: 0.2;
}

.content {
  border: 1px red solid;
  flex: 0.6;
  display: flex;
  flex-direction: column;
  flex-wrap: no-wrap;
}

.sub-header {
  border: 1px red solid;
  flex: 0.15;
}

.scrollable-content {
  border: 1px red solid;
  flex: 0.85;
  overflow: scroll;
}

.footer {
  border: 1px red solid;
  flex: 0.2;
}
    <div class="wrapper">

  <div class="header">
    --header--
  </div>
  <div class="content">

    <div class="sub-header">
      --header within body--
    </div>

    <div class="scrollable-content">
      ---scrollable content--<br> ---scrollable content--<br> ---scrollable content--<br> ---scrollable content--<br> ---scrollable content--<br> ---scrollable content--<br> ---scrollable content--<br> ---scrollable content--<br> ---scrollable content--<br>      ---scrollable content--<br>
    </div>
  </div>

  <div class="footer">
    --footer--
  </div>
</div>