Make height 100% of page?

Question

I'm experimenting with Flexbox a bit and I was wondering whether there is a property, such as flex: 1, that allows the height of an element to be 100% of the page height without adding scroll bars to scroll down. If I was to resize it, it would stick and not add scroll bars. I hope you understand. I added a fiddle with height just set at 1000px and I was hoping if any of you guys/girls would know how to set it to be 100% of the page.

https://jsfiddle.net/mL594h73/

HTML:

<div class="wrapper">
  <div class="box-1"></div>
  <div class="box-2"></div>
</div>

CSS:

.wrapper {
display: flex;
}

.box-1 {
flex: 1;
width: 200px;
height: 1000px;
background-color`enter code here`: #2ABB9B;
}

.box-2 {
flex: 1;
width: 200px;
height: 1000px;
background-color: #16A085;
}

Use VH on the div or element. 1vh = 1/100th the height of the screen. 100vh would therefore be 100% screen height. — Korgrue, Apr 26 '17 at 19:00
Possible duplicate of [Make a div fill the height of the remaining screen space](http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) — Dalin Huang, Apr 26 '17 at 19:05

score 1 · Accepted Answer · answered Apr 26 '17 at 19:00

use height:100vh in .wrapper and remove default margin from body

body {
  margin: 0
}

.wrapper {
  display: flex;
  height: 100vh
}

.wrapper>div {
  flex: 1;
  width: 200px;
}

.box-1 {
  background-color: #2ABB9B;
}

.box-2 {
  background-color: #16A085;
}

<div class="wrapper">
  <div class="box-1"></div>
  <div class="box-2"></div>
</div>

AndrewL64 · Answer 2 · 2017-04-26T19:04:03.607

1

Just remove the default margin from the body and add min-height to your parent div wrapper like this:

body {
    margin: 0px;
}
.wrapper {
    min-height: 100%;
    display: flex;
}

edited Apr 26 '17 at 19:04

answered Apr 26 '17 at 19:01

AndrewL64

15,794
8
47
79

not enough. you need to remove default `margin` from body – dippas Apr 26 '17 at 19:03

score 0 · Answer 3 · answered Apr 26 '17 at 19:05

Maybe an alternative is to set a ´position:absolute´ to get height:100% working properly. Also you can set display:table for the main container, and display:table-cell to containers inside to fit the height:100%

.wrapper {
    display:table;
    position:absolute;
    width:100%;
    height:100%;
}

.box-1 {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    width: 200px;
    background-color: #2ABB9B;
}

.box-2 {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    width: 200px;
    background-color: #16A085;
}

Example working: https://jsfiddle.net/mL594h73/1/

Make height 100% of page?

3 Answers3