layout with 100% height and header/footer - css

Question

In bootstrap 4.5 app I make layout with 100% height and header/footer, based on snippet:
https://jsfiddle.net/MadLittleMods/LmYay/
it works ok, until content part has not too much of data
I tried to add
overflow:auto;
definition of .fill-area-content
and added more data:
https://jsfiddle.net/z0o1cmve/1/
but header is not fixed. How can I fix it ?
Thanks!

Answer 1

you have to set the height to .fill-area-content, header and footer
.flexbox-item.header
{
height:35px;
background: rgba(255, 0, 0, .1);
}
.flexbox-item.footer
{
height:35px;
background: rgba(0, 255, 0, .1);
}
.fill-area-content
{
background: rgba(0, 0, 0, .3);
border: 1px solid #000000;
height: calc(100vh - (35px + 35px + 16px) );/* add this */
overflow: auto;
}
calculation:
35px - height of header
35px - height of footer
Then 8px padding u have added for .flexbox-item on all sides, so on top padding will be 8px and bottom padding will be 8px totally - 16px
hence the formula will 100vh - other elements height other elements height = (35px + 35px +16px).
So, height: calc( 100vh - (35px + 35px + 16px ));.
use vh-your_custom_height classname if you are using bootstrap.
*, *:before, *:after
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body
{
background: #444444;
color: #cccccc;
font-size: 14px;
/* Helvetica/Arial-based sans serif stack */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.flexbox-parent
{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start; /* align items in Main Axis */
align-items: stretch; /* align items in Cross Axis */
align-content: stretch; /* Extra space in Cross Axis */
background: rgba(255, 255, 255, .1);
}
.flexbox-item
{
padding: 8px;
}
.flexbox-item-grow
{
flex: 1; /* same as flex: 1 1 auto; */
}
.flexbox-item.header
{
height:35px;
background: rgba(255, 0, 0, .1);
}
.flexbox-item.footer
{
height:35px;
background: rgba(0, 255, 0, .1);
}
.flexbox-item.content
{
background: rgba(0, 0, 255, .1);
}
.fill-area
{
display: flex;
flex-direction: row;
justify-content: flex-start; /* align items in Main Axis */
align-items: stretch; /* align items in Cross Axis */
align-content: stretch; /* Extra space in Cross Axis */
}
.fill-area-content
{
background: rgba(0, 0, 0, .3);
border: 1px solid #000000;
height: calc(100vh - (35px + 35px + 16px) );
/* Needed for when the area gets squished too far and there is content that can't be displayed */
overflow: auto;
}
<div class="flexbox-parent">
<div class="flexbox-item header">
Header
</div>
<div class="flexbox-item fill-area content flexbox-item-grow">
<div class="fill-area-content flexbox-item-grow">
Content
<br /><br />
Emulates height 100% with a horizontal flexbox with stretch
<br /><br />
This box with a border should fill the blue area except for the padding (just to show the middle flexbox item).
<p>Lorem <strong>ipsum dolor sit</strong> amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis <strong>nostrud exercitation</strong> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <i>Excepteur sint occaecat</i> cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<ul>
<li>Lorem 1st point </li>
<li>Lorem 2nd point </li>
<li>Lorem 3rd point </li>
</ul>
<p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <i>Excepteur sint occaecat</i> cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>Lorem <strong>ipsum dolor sit</strong> amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis <strong>nostrud exercitation</strong> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <i>Excepteur sint occaecat</i> cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<ul>
<li>Lorem 1st point </li>
<li>Lorem 2nd point </li>
<li>Lorem 3rd point </li>
</ul>
<p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <i>Excepteur sint occaecat</i> cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div class="flexbox-item footer mb-5 pb-5">
Footer12
</div>
</div>