Geek Answers Handbook

Flexbox body and head minimum height

https://jsfiddle.net/vz7cLmxy/

I am trying to make the body expand, but the minimum height does not work. I read other related topics, but can't think it over.

CSS and HTML

body, html { padding: 0; margin: 0; min-height: 100%; } body { display: flex; background: #eee; flex-direction: column; } .menu { background: red; color: #fff; padding: 10px; } .wrap { display: flex; } .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>

The expected result is that main is stretched to fill the height if it is less than 100%.

+12
css flexbox height
source share
2 answers

Use flex: 1 for the centered element:

 .Site { display: flex; min-height: 100vh; flex-direction: column; } .Site-content { flex: 1; background-color:#bbb; } 
 <body class="Site"> <header>This is the header text ☺</header> <main class="Site-content">…</main> <footer>This is the footer text ☻</footer> </body>
+8
source share

To get min-height with relative units that work even in IE11, you only need a little trick.

The nature of min-height is to overwrite height when height less than min-height . Very clear! But the trap occurs when min-height has a real unit ( % or vh ), and height not set. Since it is relative, it has no reason to relay.

For all major browsers except Internet Explorer, one possibility is to change the unit of measure from % to vh :

 body { min-height: 100vh; }

Internet Explorer requires height (will be overwritten from min-height ):

 body { height: 1px; min-height: 100vh; }

or to save % rules must be applied to html :

 html, body { height: 1px; min-height: 100%; }

The cross-browser solution for the OP requires height: 1px per body and, of course, flex-grow: 1 for .wrap to allow it to grow faster than 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>

0
source share

More articles:


All Articles