Menu
I've been looking through all the min-height: 100% solutions on StackOverflow and the web and I can't seem to find one that fits my (relatively simple) needs.
Here's what I want:
Example Code:
http://codepen.io/anon/pen/dwgDq?editors=110
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="nav">
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
<p>Item 4</p>
<p>Item 5</p>
</div>
<div class="content">
<p>Content 1</p>
<p>Content 2</p>
<p>Content 3</p>
<p>Content 4</p>
<p>Content 5</p>
<p>Content 6</p>
<p>Content 7</p>
<p>Content 8</p>
</div>
</div>
</body>
</html>
html, body { height: 100%; margin: 0; }
.wrapper {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.container {
display: flex;
align-items: stretch;
min-height: 100%;
}
.nav {
background: grey;
width: 200px;
}
.content {
flex-grow: 1;
background: yellow;
}
This works perfectly in Safari and Chrome.
It appears as if IE (v11 in my case) doesn't honor my min-height and thus, the columns don't fill the height of the screen. From what I read, IE6+7 had issues with treating height as min-height, but this is a relic of the past and long gone when using an HTML5 doctype.
How do I make IE honor my min-height?
How do I make this layout work?
291
It can be changed by using the flex-direction property. To use flexbox, we have to set display: flex or inline-flex to flex-container. By default, the height and width of a flex-container are set to auto. But we can define a fixed amount to them.
Note also that Internet Explorer 11 supports the modern display: flex specification however it has a number of bugs in the implementation.
Conversation. CSS tip: To reset a min-height or min-width declaration, set it to "0", not "auto". For max-height/width, the initial value is "none".
Here is the fix:
HTML
<body>
<header>Header</header>
<main>Here comes the content ...</main>
<footer>Footer</footer>
</body>
CSS
body {
display: flex;
flex-direction: column;
height: 100vh;
}
header, footer {
flex-shrink: 0;
}
main {
flex: 1 0 auto;
}
jsfiddle: http://jsfiddle.net/d5syw3dc/
190
There is another solution for this problem.
In your case you can use pseudo element to stretch row:
First of all use 100vh instead of 100%
.container {
display: flex;
align-items: stretch;
min-height: 100vh;
}
After that just add pseudo element to .container with exactly same height value
.container::after{
content: '';
height: 100vh;
visibility: hidden;
}
Here, see my codepen http://codepen.io/anon/pen/LVazgQ
34
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
