如何使浏览器窗口的 div 高度为 100%

我有一个包含两列的布局 - 左侧 div 和右侧 div

右边的 div 有一个灰色的 background-color,我需要它根据用户浏览器窗口的高度垂直扩展。 现在 background-color 在那个 div 中的最后一段内容结束。

我试过height:100%min-height:100%;

There are a couple of CSS 3 measurement units called:

Viewport-Percentage (or Viewport-Relative) Lengths

What are Viewport-Percentage Lengths?

From the linked W3 Candidate Recommendation above:

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

These units are vh (viewport height), vw (viewport width), vmin (viewport minimum length) and vmax (viewport maximum length).

How can this be used to make a divider fill the height of the browser?

For this question, we can make use of vh: 1vh is equal to 1% of the viewport's height. That is to say, 100vh is equal to the height of the browser window, regardless of where the element is situated in the DOM tree:

HTML

<div></div>

CSS

div {
    height: 100vh;
}

This is literally all that's needed. Here is a JSFiddle example of this in use.

What browsers support these new units?

This is currently supported on all up-to-date major browsers apart from Opera Mini. Check out Can I use... for further support.

How can this be used with multiple columns?

In the case of the question at hand, featuring a left and a right divider, here is a JSFiddle example showing a two-column layout involving both vh and vw.

How is 100vh different from 100%?

Take this layout for example:

<body style="height: 100%">
    <div style="height: 200px">
        <p style="height: 100%; display: block;">Hello, world!</p>
    </div>
</body>

The p tag here is set to 100% height, but because its containing div has 200 pixels height, 100% of 200 pixels becomes 200 pixels, not 100% of the body height. Using 100vh instead means that the p tag will be 100% height of the body regardless of the div height. Take a look at this accompanying JSFiddle to easily see the difference!

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

</div>

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 */
}
</div>

You don't mention a few important details like:

  • Is the layout fixed width?
  • Are either or both of the columns fixed width?

Here's one possibility:

body,
div {
  margin: 0;
  border: 0 none;
  padding: 0;
}

html,
body,
#wrapper,
#left,
#right {
height: 100%;
min-height: 100%;
}

#wrapper {
margin: 0 auto;
overflow: hidden;
width: 960px; // width optional
}

#left {
background: yellow;
float: left;
width: 360px; // width optional but recommended
}

#right {
background: grey;
margin-left: 360px; // must agree with previous width
}

<html>
<head>
  <title>Example</title>
</head>

<body>
<div id=“wrapper”>
<div id=“left”>
Left
</div>

&lt;div id="right"&gt;&lt;/div&gt;

</div>
</body>

</html>

There are many variations on this depending on which columns need to be fixed and which are liquid. You can do this with absolute positioning too but I've generally found better results (particularly in terms of cross-browser) using floats instead.

Try this - tested:

body {
  min-height: 100%;
}

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

Edit: 2020 update:

You can use vh now:

#right, #left {
  height: 100vh
}
</div>

This worked for me:

html, body {
    height: 100%; /* IMPORTANT!!! Stretches viewport to 100% */
}

#wrapper {
min-height: 100%; /* Minimum height for a modern browser /
height:auto !important; /
Important rule for a modern browser /
height:100%; /
Minimum height for Internet Explorer /
overflow: hidden !important; /
Firefox scroll-bar */
}

Taken from this page.

Try to set height:100% in html & body

html, 
body {
    height: 100%;
}

And if you want to 2 div height same use or set the parent element display:flex property.