Make a div 100% height of the browser window

Question

I have a layout with two columns - a left div and a right div.

The right div has a grey background-color, and I need it to expand vertically depending on the height of the user's browser window. Right now, the background-color ends at the last piece of content in that div.

I've tried height:100%, min-height:100%; etc.

Answer 1

just use "vh" unit instead of "px", which mean view-port height.

height:100vh;

Answer 2

Try the following css :

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

Answer 3

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

Answer 4

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 css calc function. Example:

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

Answer 5

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>

Answer 6

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

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:#ffffd;
  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>