How to fix css height of dynamic body and dynamic footer - html

Question

Simply put I have 3 elements,
<div>
<Header/>
</div>
<div>
<Body/>
</div>
<div>
<Footer/>
</div>
The header is a static but undefined height.
The body is an accordion that when expanded should overflow into a scroll bar
The footer is also an accordion that should always be showing but can minimize to only show its header rather than header + content.
What I need to have happen is to have the header always displayed in full, have the accordionFooter always display as much as it wants (whether header + content, or just header), and finally let the bodyAccordion display as much as it can and then overflow into a scroll bar.
Here's what I have so far.
Container: {
height: '100%',
minHeight: '100%',
display: 'flex',
flexDirection: 'column'
},
SectionContainer: {
flex: '1',
display: 'flex',
flexDirection: 'column',
position: 'relative'
},
bodyAccordion: {
overflowY: 'auto'
},
footerAccordion: {
position: 'absolute',
bottom: '0px',
right: '0px',
left: '0px'
}
The html is considerably more complex so here is a simplified version
<div className={Container}>
<MyHeader/>
<div className={SectionContainer}>
<div className={bodyAccordion}>
<MyAccordion/>
</div>
<div className={footerAccordion}>
<MyFooterAccordion/>
</div>
</div>
</div>
When the above code runs the bodyAccordion will overflow into the footeraccordion rather than increasing the size of the scrollable wheel.
Here's a jsFiddle that shows the issue
https://jsfiddle.net/jackyFrosty/mwz62bh9/2/

Answer 1

You need to to asign in your container class min-height:100vh. It happens because your 100% is equal to your child's labels

Answer 2

var headerheight= document.querySelector("header").offsetHeight;
var footerheight= document.querySelector("footer").offsetHeight;
var contentheight = window.innerHeight -(footerheight+headerheight);
document.querySelector(".content").style.height= `${contentheight}px`;
*{
margin:0;
padding:0;
}
header{
height:100px;
background-color:red;
}
footer{
height:50px;
background-color:yellow;
}
.content{
background-color:skyblue;
width:100%;
overflow-y:scroll;
}
.inner{
height:500px;
width:50%;
margin:0 auto;
background-color:white;}
<header>header</header>
<div class="content">
<div class="inner">body</div>
</div>
<footer>footer</footer>
i used javascript to get header and footer height so u can calculate the body height for remaining screen height !

Answer 3

When the above code runs the bodyAccordion will overflow into the footeraccordion rather than increasing the size of the scrollable wheel.
This is happening because you have given position: absolute to your footer. Get rid of it and the bodyAccordion will stack over your footer. If you want the scroll to work, you should restrict the height of your bodyAccordition. Currently there's no restriction on it. As Sergio has explained in his answer, it will be better if you go with 100vh instead of 100%
let the bodyAccordion display as much as it can and then overflow into a scroll bar
Finally for it, get rid of flex:1. This will make your bodyAccordition to take up maximum space above footer.
Hope it helps. Cheers!

Answer 4

Thanks for the answers everyone,
I was able to figure this out by using the following
<div className='header'>
<MyHeader/>
</div>
<div className='container'>
<div className='content'>
<MyContent/>
</div>
<footer className='footer'>
<MyFooter/>
</footer>
</div>
container: {
position: 'relative',
height: 'calc(100vh - 95px)',
display: 'flex',
flexDirection: 'column'
},
header: {
height: '35px',
width: '100%'
},
content: {
overflowY: 'auto',
flex: '1'
},
footer: {
marginBottom: '0px',
textAlign: 'left'
}