Menu
I'm trying to use a flexbox-based layout to display a page with a sticky footer. This works well with short pages (less than the height of the window) in all browsers. However, the same approach with long pages works in Firefox, but IE11 cuts the container element to about 25% of the child element.
Here is the example: https://codepen.io/vers/pen/rraKYP
html {
height: 100%;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
}
div.container {
max-width: 600px;
background-color: #aaa;
flex-grow: 1;
display: flex;
flex-direction: column;
font-family: 'Roboto', sans-serif;
font-size: 20px;
line-height: 1.5;
}
div.content {
margin: 8px;
flex-grow: 1;
}
div.header,
div.footer {
background-color: black;
color: #fff;
}<html>
<body>
<div class="container">
<div class="header">Header</div>
<div class="content">
<p>...</p>
<!-- 40 long paragraphs here -->
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
387
When you use the height property, some browsers will interpret that as the limit. As an alternative, use min-height.
Instead of this:
html {
height: 100%;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
}
Just use this:
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
revised codepen
Alternatively, this also works:
html {
display: flex;
flex-direction: column;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
revised codepen
Both methods tested in Chrome, FF, IE11 & Edge.
139
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
