简体   繁体   中英

Height of Flex Div Not 100%

I have the body full height, but the containing div with a min-height of 100% does not fill. I'd like the blue to fill it's body container and flex align the internal divs.

https://codepen.io/steventnorris/pen/oVdKqY

 html { min-height: 100%; width: 100%; } body { min-height: 100%; width: 100%; background-color: green; } .main { display: flex; flex-direction: row; min-height: 100%; justify-content: space-between; background-color: blue; } 
 <div class="main"> <div>Text 1</div> <div>Text 2</div> </div> 

You can give .main class a min-height of 100vh.

.main{
 display: flex;
 flex-direction: row;
 min-height: 100vh;
 justify-content: space-between;
 background-color: blue;
 }

Demo: https://codepen.io/anon/pen/pYKzzM

You may want to go through Height Calculation By Browsers : Containing Blocks and Children . Clearly height and min-height are not the same thing in CSS.


Change min-height to height for your body and html - see demo below:

 html{ height: 100%; /* changed to height */ width: 100%; } body{ height: 100%; /* changed to height */ width: 100%; background-color: green; } .main{ display: flex; flex-direction: row; min-height: 100%; justify-content: space-between; background-color: blue; } 
 <div class="main"> <div>Text 1</div> <div>Text 2</div> </div> 

You can also give height: 100vh to the main element to set an instrinsic height for the flexbox - see demo below:

 body{ margin: 0; height: 100vh; /* full viewport height */ background-color: green; } .main{ display: flex; flex-direction: row; min-height: 100%; justify-content: space-between; background-color: blue; } 
 <div class="main"> <div>Text 1</div> <div>Text 2</div> </div> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM