I've been experimenting with flexbox in order to keep my footer at the bottom of the page, but only when the content is shorter than the viewport. The goal is for the footer to stay below the content if the content is taller, requiring users to scroll to see it.
Interestingly, this setup functions correctly in Firefox and Edge, but not in Chrome or IE.
In Chrome, you'll notice that reducing the viewport size results in the footer becoming "stuck" to the bottom of the screen. Upon scrolling, the footer remains fixed in place and moves up the page.
The culprit seems to be the contentContainer:
#contentContainer {
display: flex;
flex-direction: column;
overflow: auto;
height: 100%;
width: 100%;
}
This container holds both the content and the footer, allowing it to have the scrollbar instead of the content itself. Unfortunately, the issue eludes me.
html,
body,
#app {
padding: 0;
margin: 0;
}
#app,
#appContainer {
display: flex;
flex-direction: column;
height: 100vh;
}
#header {
background-color: #dddddd;
width: 100%;
min-height: 36px;
height: 36px;
display: flex;
flex-direction: row;
}
#contentContainer {
display: flex;
flex-direction: column;
overflow: auto;
height: 100%;
width: 100%;
}
#content {
display: flex;
flex-direction: column;
flex: 1;
}
#footer {
display: flex;
flex-direction: row;
background-color: #dddddd;
height: 20px;
min-height: 20px;
width: 100%;
}<div id="app">
<div id="appContainer">
<div id="header">Header</div>
<div id="contentContainer">
<div id="content">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div id="footer">Footer</div>
</div>
</div>
</div>Check out the demo on JSFiddle.