CODEWITHSUNDEEP
htmlcssflexbox
RogerFedFan
RogerFedFan

Reputation: 566

Make height 100% of page?

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;
}

Upvotes: 0

Views: 712

Answers (3)

TriForce
TriForce

Reputation: 415

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/

Upvotes: 0

AndrewL64
AndrewL64

Reputation: 16341

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;
}

Upvotes: 1

dippas
dippas

Reputation: 60573

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>

Upvotes: 1

Related Questions