3 row with dynamic div heights based on content and container in CSS/HTML

Question

I am trying to create a "window", where there is a 'head', 'content' and 'foot' section, the content in all 3 sections can vary, what I am trying to achieve is that the 'head' and 'foot' expand in height to fit their content (could be anything from 0px to 300px) and the 'content' section expands to fill the remaining space in the container. if content of the 'content' box is too big, it should show a scroll bar.

This is what I have so far:

<style>
#container{
    position: absolute;
    display: table;
    width: 500px;
    height: calc(100vh - 80px);
    top: 80px;
    right: 0;
    border-spacing: 10px;
    background-color: lightgrey;
}

#container > .header{
    position: absolute;
    display: table-row;
    background-color: blue;
    width: calc(100% - 20px);
}

#container > .content{
    position: relative;
    display: table-row;
    background-color: green;
}

#container > .footer{
    position: absolute;
    display: table-row;
    background-color: red;
    width: calc(100% - 20px);
    bottom: 10px;
}


</style>
<div id="container">
    <div class="header">&nbsp;</div>
    <div class="content">&nbsp;</div>
    <div class="footer">&nbsp;</div>
</div>

Ultimatly I would like to have the content scroll BEHIND the header and footer but that would require adding margin/padding to the content box on top and bottom but the header and footer heights are unknown.

If I have to resort to java-script to achieve this (get height of header and footer then set content height) I will but would prefer to do it with CSS.

score 1 · Accepted Answer · answered Dec 10 '20 at 07:04

You can use flex-box with flex-direction: column to achieve this kind of layout, no need to assign margins or paddings:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

header, footer {
  background-color: salmon;
  padding: 10px;
}

main {
  flex: 1;
  overflow-y: auto;
  background-color: steelblue;
  padding: 10px;
}

<div class="container">
  <header>Header</header>
  <main>
    <p>Lorem ipsum</p><br /><br /><br />
    <p>Lorem ipsum</p><br /><br /><br />
    <p>Lorem ipsum</p><br /><br /><br />
    <p>Lorem ipsum</p><br /><br /><br />
    <p>Lorem ipsum</p><br /><br /><br />
    <p>Lorem ipsum</p><br /><br /><br />
    <p>Lorem ipsum</p><br /><br /><br />
    <p>Lorem ipsum</p><br /><br /><br />
    <p>Lorem ipsum</p><br /><br /><br />
    <p>Lorem ipsum</p><br /><br /><br />
    <p>Lorem ipsum</p><br /><br /><br />
    <p>Lorem ipsum</p><br /><br /><br />
    <p>Lorem ipsum</p>
  </main>
  <footer>Footer</footer>
</div>

Thanks. The margin comment was about having the scrolled content behind the head and foot (with a gradient going from solid to transparent) so the text fades out. Not crucial, just an added extra. — mike16889, Dec 10 '20 at 07:58

score 0 · Answer 2 · answered Dec 10 '20 at 07:08

Since you are looking for a "flexible" layout I recommend you use flexbox with overflow-y: auto on the content div. In the below example, the container is the body element:

* {
  margin:     0;
  padding:    0;
  box-sizing: border-box;
}

body {
  display:        flex;
  flex-direction: column;
  align-items:    stretch;
  width:          100vw;
  height:         100vh;
}

header, footer, .content {
  width: 100%;
}

header {
  background: rgba(150,0,0,0.5);
}

footer {
  background: rgba(0,150,0,0.5);
}

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

<header>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Metus aliquam eleifend mi in. Purus sit amet volutpat consequat mauris. Tincidunt arcu non sodales neque sodales ut. Amet est placerat in egestas erat imperdiet sed euismod. Sit amet mauris commodo quis. Amet nisl suscipit adipiscing bibendum est ultricies integer quis. Metus vulputate eu scelerisque felis. Facilisi etiam dignissim diam quis. Purus faucibus ornare suspendisse sed. Nunc non blandit massa enim nec. At auctor urna nunc id cursus metus aliquam eleifend mi. Varius sit amet mattis vulputate enim nulla aliquet. Purus viverra accumsan in nisl nisi scelerisque. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi.
</header>
<div class="content">Your content goes here</div>
<footer>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Metus aliquam eleifend mi in. Purus sit amet volutpat consequat mauris. Tincidunt arcu non sodales neque sodales ut. Amet est placerat in egestas erat imperdiet sed euismod. Sit amet mauris commodo quis. Amet nisl suscipit adipiscing bibendum est ultricies integer quis. Metus vulputate eu scelerisque felis. Facilisi etiam dignissim diam quis. Purus faucibus ornare suspendisse sed. Nunc non blandit massa enim nec. At auctor urna nunc id cursus metus aliquam eleifend mi. Varius sit amet mattis vulputate enim nulla aliquet. Purus viverra accumsan in nisl nisi scelerisque. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi.
</footer>

3 row with dynamic div heights based on content and container in CSS/HTML

2 Answers2