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

我有两列的布局 - 左div和右div 。

右边的div具有灰色background-color ，我需要根据用户浏览器窗口的高度将其垂直扩展。现在， background-color在该div中的最后一条内容处结束。

我已经尝试过height:100% ， min-height:100%;等

答案

有几个 CSS 3 度量单位，称为：

视口百分比（或相对于视口）长度

什么是视口百分比长度？

根据上面链接的 W3 候选推荐书：

视口百分比长度相对于初始包含块的大小。更改初始包含块的高度或宽度时，将对其进行相应缩放。

这些单位是vh （视口高度）， vw （视口宽度）， vmin （视口最小长度）和vmax （视口最大长度）。

如何使用它来使分隔符填充浏览器的高度？

对于这个问题，我们可以使用vh ： 1vh等于视口高度的 1％。也就是说，无论元素在 DOM 树中位于何处， 100vh都等于浏览器窗口的高度：

的 HTML 

<div></div>

的 CSS 

div {
    height: 100vh;
}

这实际上就是所需要的。这是一个正在使用的JSFiddle 示例 。

哪些浏览器支持这些新单元？

目前，除 Opera Mini 之外，所有最新的主流浏览器均支持此功能。查看我可以使用...以获得更多支持。

如何与多列一起使用？

对于具有左右分隔线的当前问题，这是一个JSFiddle 示例，显示了涉及vh和vw的两列布局。

100vh与100%有何不同？

以以下布局为例： 

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

此处的p标签设置为 100％高度，但是由于其包含div高度为 200 像素，因此 200 像素的 100％变为 200 像素， 而不是 body高度的 100％。相反，使用100vh意味着p标签将为body 100％高度，而与div高度无关。看看这个随附的 JSFiddle，可以轻松看到其中的区别！

如果要设置<div>或任何元素的高度，也应将<body>和<html>的高度也设置为 100％。然后您可以将元素的高度设置为 100％:)

这是一个例子： 

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

如果您能够完全定位自己的元素， 

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

会做到的。

您可以在 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 */
}

在这种情况下，您可以使用vh ，它相对于视口高度的1％ ...

这意味着如果您想掩盖高度，只需使用100vh 。

请看下面我为您绘制的图像：

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

试试我为您创建的代码段，如下所示： 

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

与弹性模型解决方案相比，所有其他解决方案（包括投票最多的带有vh解决方案）都不是最优的。

随着CSS flex 模型的出现，解决 100％高度问题变得非常非常容易：use height: 100%; display: flex在父元素上height: 100%; display: flex ，在子元素上height: 100%; display: flex flex: 1 。他们会自动占用容器中的所有可用空间。

注意标记和 CSS 是多么简单。没有桌子黑客或任何东西。

所有主要的浏览器以及 IE11 + 都支持 flex 模型。 

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>

在此处了解有关flex 模型的更多信息。

您没有提到一些重要的细节，例如：

  • 布局是否固定宽度？
  • 两列中的一列或两列是否固定宽度？

这是一种可能性： 

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>

    <div id="right"></div>
  </div>
</body>

</html>

根据需要固定的色谱柱和液体的色谱柱，可以有多种变化。您也可以使用绝对定位来做到这一点，但我通常发现使用浮点数会获得更好的效果（特别是在跨浏览器方面）。

这对我有用： 

<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; background: red;"> </div>

使用position:fixed而不是position:absolute ，这样即使您向下滚动该分区也会扩展到屏幕的末端。

这是固定高度的方法。

在您的 CSS 中使用： 

#your-object: height: 100vh;

对于不支持vh-units浏览器，请使用 modernizr。

添加此脚本（以添加对vh-units检测） 

// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
    var bool;
    Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {   
        var height = parseInt(window.innerHeight/2,10),
            compStyle = parseInt((window.getComputedStyle ?
                      getComputedStyle(elem, null) :
                      elem.currentStyle)["height"],10);

        bool= !!(compStyle == height);
    });
    return bool;
});

如果浏览器不支持vh-units最后使用此函数将视口的高度添加到#your-object ： 

$(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height())+'px'});
    }
});

100%的宽度和高度工作方式不同。

当您指定width: 100% ，表示 “从父元素或窗口的宽度中获取可用宽度的 100％”。

当您指定height: 100% ，仅表示 “从父元素获取 100％的可用高度”。这意味着如果您未在顶级元素上指定高度，则所有子元素的高度将为0或父元素的高度，这就是为什么您需要将最顶层元素设置为min-height窗口高度。

我总是将主体的最小高度指定为 100vh，这使定位和计算变得容易， 

body {
  min-height: 100vh;
}