If you're struggling to make the min-height property work with relative units, especially in IE11, there's a simple workaround.
The primary function of min-height is to take precedence over the height property when the height value is smaller than the specified min-height. This concept is straightforward. However, an issue arises when using a relative unit (% or vh) for min-height without setting a corresponding height. Since the relative unit lacks a specific reference point, it can lead to unexpected behavior.
In most modern browsers, except for Internet Explorer, adjusting the unit from % to vh can resolve the problem:
body {
min-height: 100vh;
}
For Internet Explorer compatibility, setting a minimal height value is necessary (to be overridden by min-height):
body {
height: 1px;
min-height: 100vh;
}
Alternatively, if you prefer to stick with the % unit, the rules should also be applied to the html element:
html, body {
height: 1px;
min-height: 100%;
}
To create a cross-browser solution, ensure that height: 1px is set on the body element and include flex-grow: 1 for the .wrap container to allow it to expand faster than the menu and footer:
body,
html {
padding: 0;
margin: 0;
height: 1px; /* added */
min-height: 100%;
}
body {
display: flex;
background: #eee;
flex-direction: column;
}
.menu {
background: red;
color: #fff;
padding: 10px;
}
.wrap {
display: flex;
flex-grow: 1; /* added */
}
.sidebar {
background: #ddd;
width: 300px;
}
.main {
background: #ccc;
flex: 1;
}
.footer {
background: #000;
color: #fff;
padding: 10px;
}
<div class="menu">Menu</div>
<div class="wrap">
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
</div>
<div class="footer">Footer</div>