How to make a div 100% height of the browser window

Even with all of the answers here, I was surprised to find that none really solved the problem. If I used 100vh height/min-height, the layout broke when the content was longer than a page. If I instead used 100% height/min-height, the layout broke when the content was less than the page height.

The solution I found, which solved both cases, was to combine the top two answers:

html, body, #mydiv {
  height: 100%;
  min-height: 100vh;
}

100vw = 100% of the width of the viewport.

100vh = 100% of the height of the viewport.

If you want to set the div width or height 100% of browser-window-size you should use:

For width: 100vw

For height: 100vh

Or if you want to set it smaller size, use the CSS calc function. Example:

#example {
    width: calc(100vw - 32px)
}

100% works differently for width and height.

When you specify width: 100%, it means "take up 100% of the available width from the parent element or width of the window."

When you specify height: 100%, it only means "take up 100% of available height from the parent element." This means if you don't specify a height at a top level element, the height of all the children will be either 0 or height of the parent, and that is why you need to set the topmost element to have a min-height of window height.

I always specify the body to have a min-height of 100vh and it makes positioning and calculations easy,

body {
  min-height: 100vh;
}

A full page is called a 'viewport' and you can design an element according to its viewport in CSS3.

Such units are called viewport-percentage lengths and are relative to the size of the initial containing block.

• Viewport-Height is called vh. The complete height of a page is 100vh.
• Viewport-Width is called vw. The complete height of a page is 100vw.
• There also exist vmin (viewport minimum length) and vmax (viewport maximum length).

So now, your problem can easily be solved by adding the following to your CSS:

.classname-for-right-div /*You could also use an ID*/ { 
  height: 100vh;
}

Here is information about the Viewport-relative lengths

Simplest way is to do it like this.

div {
background: red;
height: 100vh;
}
body {
margin: 0px;
}

<div></div>

if you set html and body height to 100% so it will cover whole page and if you set any particular div minimum height to 100% so it will cover whole window like this:

CSS

html,body{
 height:100%;
}

div#some-div{
min-height:100%;

}

REMEMBER

This will only work if div's direct parent is body, as percentage always inherited from the direct parent and by doing above css code you are telling to div that inherit the height 100% from direct parent (body) and makes it your min-height: 100%

Another way

simply put div height to 100vh,its mean 100 viewport height

CSS

div#some-div{
 height:100vh

}

Block elements consume the full width of their parent, by default.

This is how they meet their design requirement, which is to stack vertically.

9.4.1 Block formatting contexts

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block.

This behavior, however, does not extend to height.

By default, most elements are the height of their content (height: auto).

Unlike with width, you need to specify a height if you want extra space.

Therefore, keep these two things in mind:

• unless you want full width, you need to define the width of a block element
• unless you want content height, you need to define the height of an element

.Contact {
  display: flex;     /* full width by default */
  min-height: 100vh; /* use full height of viewport, at a minimum */
}

.left {
  flex: 0 0 60%;
  background-color: tomato;
}

.right {
  flex: 1;
  background-color: pink;
}

body { margin: 0; } /* remove default margins */

<div class="Contact">
  <section class="left">
    <div class="">
      <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
    </div>
  </section>
  <section class="right">
    <img />
  </section>
</div>

Try This Once...

*{
  padding:0;
  margin:0;
}
.parent_div{
  overflow:hidden;
  clear:both;
  color:#fff;
  text-align:center;
}

.left_div {
  float: left;
  height: 100vh;
  width: 50%;
  background-color: blue;

}

.right_div {
  float: right;
  height: 100vh;
  width: 50%;
  background-color: green;

}

<div class=" parent_div">
  <div class="left_div">Left</div>
  <div class="right_div">Right</div>
</div>

You can use display: flex and height: 100vh

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

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}

<div class="left">left</div>
<div class="right">right</div>

Actually what worked for me best was using the vh property.

In my React application I wanted the div to match the page high even when resized. I tried height: 100%;, overflow-y: auto;, but none of them worked when setting height:(your percent)vh; it worked as intended.

Note: if you are using padding, round corners, etc., make sure to subtract those values from your vh property percent or it adds extra height and make scroll bars appear. Here's my sample:

.frame {
  background-color: rgb(33, 2, 211);
  height: 96vh;
  padding: 1% 3% 2% 3%;
  border: 1px solid rgb(212, 248, 203);
  border-radius: 10px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 100px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);
}

Now use height:100vh; for fixed window Height

<style>
 .header-top{height:100vh; background:#000; color:#fff;display:flex;align-items:center;padding:10px; justify-content: space-around;}
 .header-top ul{list-style:none;padding:0; margin:0;display:flex;align-items:center;  }
 .header-top ul li{padding:0px 10px;}
</style>
   <div class="header-top">
       <div class="logo">Hello</div>
       <ul>
          <li>Menu</li>
          <li>About Us</li>
         <li>Contact US</li>
         <li>Login</li>
     </ul>
  </div>

This stuff will resize height of content automatically according to your browser. I hope this will work for you. Just try this example given below.

You have to set up only height:100%.

html,body {
  height: 100%;
  margin: 0;
}
.content {
  height: 100%;
  min-height: 100%;
  position: relative;
}
.content-left {
  height: auto;
  min-height: 100%;
  float: left;
  background: #ddd;
  width: 50%;
  position: relative;
}

#one {
  background: url(http://cloud.niklausgerber.com/1a2n2I3J1h0M/red.png) center center no-repeat scroll  #aaa;
  width: 50%;
  position: relative;
  float: left;
}

#two {
 background: url(http://cloud.niklausgerber.com/1b0r2D2Z1y0J/dark-red.png) center center no-repeat scroll #520E24;
  width: 50%;
  float: left;
  position: relative;
  overflow-y: scroll;
}

<div class='content' id='one'></div>
<div class='content-left' id='two'></div>

You can use the following CSS to make a div 100% of the height of the browser window:

display: block;
position: relative;
bottom: 0;
height: 100%;

Stupidly easy solution which supports cross-domain and also supports browser re-size.

<div style="height: 100vh;">
   <iframe src="..." width="100%" height="80%"></iframe>
</div>

Adjust the iframe height property as required (leave the div height property at 100vh).

Why 80%? In my real-world scenario I have a header inside the div, before the iframe, which consumes some vertical space - so I set the iframe to use 80% instead of 100% (otherwise it would be the height of the containing div, but start after the header, and overflow out the bottom of the div).