CSS / HTML5：如何将div标签高度调整为等于浏览器窗口的当前高度？

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.

Answer 1

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 .

Answer 2

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 )

Answer 3

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

Answer 4

You can do it by jquery on simple way.

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

Answer 5

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.

Answer 6

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

Answer 7

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>