Making the height of a div the 100% of the screen

Question

I have the following code that I am trying to use to make the div the full height of the webpage.

HTML:

<div class="page-wrapper">

 <div class="vc_col-sm-6 wpb_column vc_column_container">
  Some content Goes Here
 </div>


<div>

CSS:

.page-wrapper {height: 100%;}

.vc_col-sm-6 {height: 100%; background: red;}

This same question was asked just yesterday: http://stackoverflow.com/questions/28838552/how-to-make-a-text-box-same-height-as-the-window/28838680 — mellis481, Mar 04 '15 at 20:31

score 1 · Accepted Answer · answered Mar 04 '15 at 20:31

1

.page-wrapper {height: 100%;}

.vc_col-sm-6 {height: 100vh;
    background: red;}

<div class="page-wrapper">
  
<div class="vc_col-sm-6 wpb_column vc_column_container">
 Some content Goes Here
 </div>
</div>

give the height as

height: 100vh;

viewport height

answered Mar 04 '15 at 20:31

Tushar Gupta

downvote reason ?? I hate this thing at SO :( – Tushar Gupta Mar 04 '15 at 20:32

score 0 · Answer 2 · answered Mar 04 '15 at 20:31

0

You need to make the height of the html, body, .page-wrapper and inner elements all 100%.

html,
body,
.page-wrapper,
.vc_column_container {
  height:100%;
}

answered Mar 04 '15 at 20:31

Brett DeWoody

score 0 · Answer 3 · answered Mar 04 '15 at 20:38

  .page-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: grey;
  }

<div class="page-wrapper">

  <div class="vc_col-sm-6 wpb_column vc_column_container">
    Some content Goes Here
  </div>

  <div>

3 Answers3