There seems to be a mysterious gap between the top red and blue bars.
What could I be doing incorrectly? Removing main eliminates the bar, but then the footer moves up?
If you'd like to take a look at what's happening, here is a link to my fiddle: https://jsfiddle.net/v9yrmafw/1/#
.strip {
height: 20px;
background: red;
}
.bar {
text-align: center;
background: blue;
color: white;
height: 100px;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.footer {
margin-top: auto;
}
.footer__body {
display: flex;
align-items: center;
justify-content: center;
height: 70px;
background: yellow;
color: white;
}
main {
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
}<div class="container">
<main>
<div class="strip"></div>
<div class="bar">
<h1>Home</h1>
</div>
</main>
<footer>
<div class="footer">
<div class="footer__body">
<p>© {{ copyright }} {{ now }}</p>
</div>
</div>
</footer>
</div>