Advertisement
Advertisement


How to 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.

2019/07/08
1
2198
7/8/2019 11:32:09 PM


If you want to set the height of a <div> or any element, you should set the height of <body> and <html> to 100% too. Then you can set the height of element with 100% :)

Here is an example:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}
2013/10/22

If you’re able to absolutely position your elements,

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

would do it.

2014/05/22

You can use the view-port unit in CSS:

HTML:

<div id="my-div">Hello World!</div>

CSS:

#my-div {
    height: 100vh; /* vh stands for view-port height, 1vh is 1% of screen height */
}
2019/07/08

You can use vh in this case which is relative to 1% of the height of the viewport...

That means if you want to cover off the height, just simply use 100vh.

Look at the image below I draw for you here:

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

Try the snippet I created for you as below:

.left {
  height: 100vh;
  width: 50%;
  background-color: grey;
  float: left;
}

.right {
  height: 100vh;
  width: 50%;
  background-color: red;
  float: right;
}
<div class="left"></div>
<div class="right"></div>

2019/09/17

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.

2014/11/06

Source: https://stackoverflow.com/questions/1575141
Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Email: [email protected]