CSS/HTML5: How to adjust div tag height equal to browser window's current height?

Question

I want the height of my div tag exactly equal to the height of the browser's window. So if you resize the browser the should adjust automatically. So what should I set my height equal to in CSS.

I have tried

.class {
  height: 100%;
}

Doesn't work.

em, rem, vh, wh apparently only work with the font.

If I however, hard-code the body tag to some amount of pixels, then the percentage works for the children tags but this is not dynamic.

What I want: Just as I am viewing this stack page in my browser. I wish when I resize the browser I still get the same amount of page viewership, only resized for the new size (responsive).

Thanks.

_"em, rem, vh, wh apparently only work with the font"_ - wrong. But `height: 100%;` _only_ works if the parent element has an explicit height set. — CBroe, Jun 07 '17 at 11:34
Possible duplicate of [Make div 100% height of browser window](https://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window) — Gerard, Jun 07 '17 at 11:35

score 3 · Answer 1 · edited Jan 27 '18 at 05:54

3

You want to add vh so something like this.

*{
  margin:0;
  padding:0;
}
.container{
  background:grey;
  height:100vh;
}

and HTML

<div class="container">
  <h1>Hello from the other side</h1>
</div>

and here is an example.

edited Jan 27 '18 at 05:54

Bhuwan

16,525
5
34
57

answered Jun 07 '17 at 11:33

localhost

822
2
20
51

score 0 · Answer 2 · answered Jun 07 '17 at 11:30

0

You need to add

html, body {
  width: 100%;
  margin: 0;
}

to set a height reference for the DIV (any DIV is a child of another element, a DIV without another container is a child of body, which is a child of html)

answered Jun 07 '17 at 11:30

Johannes

64,305
18
73
130

score 0 · Answer 3 · answered Jun 07 '17 at 11:31

0

Your divs parent is the body. height:100% will go as high as the parent. So you need to do this.

html,body {
  height:100%;
  margin:0;
}

answered Jun 07 '17 at 11:31

WizardCoder

3,353
9
20

score 0 · Answer 4 · answered Jun 07 '17 at 11:34

0

You can do it by jquery on simple way.

 $(document).ready(function(){
     var heights = window.innerHeight;
    $(".class ").style.height = heights + "px";
 });

answered Jun 07 '17 at 11:34

Janen R

729
10
21

score 0 · Answer 5 · answered Jun 07 '17 at 11:38

0

Yes you can add VH height to a div and completely agree with @Nofel.

But it will will for mozilla and chrome. It will not work for Safari or IE.

Add vh property resize the window.

answered Jun 07 '17 at 11:38

Sangrai

687
1
6
19

score 0 · Answer 6 · answered Jun 07 '17 at 11:39

You can bind a function to resize the container on window resize.

HTML:

<div class="container">
   Content
</div>

CSS:

.container {
   height: 100vh;
}

JavaScript:

function resize_container() {
   var height = $(window).height(),
       container = $('.container');

   container.css('height', height);
}

$(window).resize(resize_container);

Bhuwan · Answer 7 · 2018-01-10T06:54:55.043

Solution 1

You can try height :100vh to achieve this. Check below snippet:

body{
  margin: 0;
}
.windowHeight{
  height: 100vh;
  display: block;
  background: #000;
}

<div class="windowHeight">
  
</div>

Solution 2

Another way to do this by jQuery. Check below snippet:

$('.windowHeight').css('height', $(window).height());

body{
  margin:0;
}
.windowHeight{
  background:#000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="windowHeight"></div>

CSS/HTML5: How to adjust div tag height equal to browser window's current height?

7 Answers7