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

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

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

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

答案

有几个 CSS 3 度量单位,称为:

视口百分比(或相对于视口)长度

什么是视口百分比长度?

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

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

这些单位是vh (视口高度), vw (视口宽度), vmin (视口最小长度)和vmax (视口最大长度)。

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

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

的 HTML

<div></div>

的 CSS

div {
    height: 100vh;
}

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

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

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

如何与多列一起使用?

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

100vh100%有何不同?

以以下布局为例:

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