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

Try this - tested:

body {
  min-height: 100%;
}

#right, #left {
  height: 100%;
}

Answer 2

All the other solutions, including the top-voted one with vh are sub-optimal when compared to the flex model solution.

With the advent of the CSS flex model, solving the 100% height problem becomes very, very easy: use height: 100%; display: flex on the parent, and flex: 1 on the child elements. They'll automatically take up all the available space in their container.

Note how simple the markup and the CSS are. No table hacks or anything.

The flex model is supported by all major browsers as well as IE11+.

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

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}

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

Learn more about the flex model here.

Answer 3

100% works differently for width and height.

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

When you specify height: 100%, it only means "take up 100% of available height from parent element." What this means is 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;
}

Answer 4

Actually what worked for me best is using vh property, in my react application in wanted the div to match the page high even when resized tried height: 100%; , overflow-y: auto; , 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 you vh property percent or it's add 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);

}

Answer 5

If you’re able to absolutely position your elements,

position: absolute;
top: 0;
bottom: 0;

would do it.

Answer 6

Add min-height: 100% and don't specify a height (or put it on auto). It totally did the job for me:

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}