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


我有一个有两列的布局 - 左边 div 和权利 div

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

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


1685
2017-10-15 21:18


起源


你可能会发现这个问题很有用 stackoverflow.com/questions/1366548/... - Ivan Nevostruev
很好的方式,但vh,vw等单位被称为越野车。如果您需要,可以选择这种轻量级的js: joaocunha.github.io/vunit - see sharper
这是CSS的简单明了的解释 height 具有百分比值的财产: stackoverflow.com/a/31728799/3597276 - Michael_B


答案:


有几个CSS3测量单位称为:

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

什么是视口 - 百分比长度?

从以上链接的W3候选推荐标准:

视口百分比长度相对于初始包含块的大小。当初始包含块的高度或宽度改变时,它们相应地缩放。

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

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

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

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 高度为200px,200px的100%变为200px,  100%的 body 高度。运用 100vh 相反意味着 p 标签将是100%的高度 body 不管 div 高度。看看这个 伴随着JSFiddle 轻松看到差异!


2371
2018-05-30 13:33



非常难过,我似乎无法将其与calc()结合使用。就像我的元素有边框一样 height: calc(100vh - 2px); - Langdon
当元素实际高于视口时滚动的奇怪行为。容器保持视口高度,内容流出容器。 min-height:100vh 似乎可以解决这个问题。 - wdm
@DGDD适用于iOS Safari 6 +,Android Browser 4.4+,BlackBerry Browser 10.0和IEMobile 10.0。我不知道您所使用的是哪种移动浏览器,但这些浏览器占据了所使用的移动浏览器的90%以上。此问题未指定在移动浏览器上工作的要求。 - James Donnelly
再次@ robross0606这不是我在这里回答的问题。这是一个完全不同的问题,其答案确实使用了flexbox: stackoverflow.com/questions/90178/... - James Donnelly
vh并不是我可以测试的所有手机上的 - Daniel Rodriguez


如果要设置a的高度 <div> 或任何元素,你应该设置的高度 <body> 和 <html> 也是100%。然后你可以用100%设置元素的高度:)

这是一个例子:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

522
2017-12-11 13:10



这在IE 8中不起作用。 - TreK
如果我错了,纠正我,但我认为你还需要为div的所有父母设定高度,以便实际工作 - Dany Y
这并不奇怪。这非常难过。 (谈论HTML不是答案) - Den
如果我使用连续设计,这将无效:页面6000px高度,块表示页面。我希望一个块完全是视口的高度。 - Qwerty
@Qwerty,这是解决方案。设置css如下: html { height: 100%*number of blocks; }, body { height: 100%;}, #div { height: 100%/number of blocks; }。所以如果你有3个部分,那就是 html { height: 300%; } body { height: 100%; } #div { height: 33.3% } - cameronjonesweb


如果你能够绝对定位你的元素,

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

会这样做的。


242
2017-10-15 21:31



这可以通过从文档流中取出元素并将其底部值固定到其父级的高度来实现。当您的内容超出其父级的高度时,这并不理想。 - Ricky Boyce
我尝试了这个,它很棒,但随后绝对定位,你不能水平居中,边缘 - [左|右]:自动 - Petruza
这是一个很好的解决方案。一旦发表评论,就像#Petruza一样,左边和右边都有麻烦,所以我最后添加了以下内容:body {color:#004A6E;位置:绝对;顶部:0;底部:0;左:0;右:0; } - Kremena Lalova
当其中一个父母被设置为时,这不起作用 position:relative 并且它的高度不是视口的100%。它将调整顶部和底部,使其成为下一个相对或绝对的祖先。 - Seika85
谢谢你这比告诉身体和html占据身高100%更好 - dave o grady


您可以在CSS中使用view-port单元:

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

129
2018-05-04 11:11



如何使用填充?当我向#my-div添加填充时,它会比视口大。 - Lamar
@Lamar你应该使用 * { box-sizing: border-box; } 防止这种情况发生。 - Luca Steeb
值得检查caniuse对视口单元的浏览器支持: caniuse.com/#feat=viewport-units - Dave Everitt
在所有浏览器中运行良好,即使在ie9中也是如此 - luky
这在iOS Safari中不起作用,使得vh基本上毫无价值,因为苹果公司无意采用它。 - 3Dom


所有其他解决方案,包括最高投票的解决方案 vh 与...相比是次优的 flex模型 解。

随着的到来 CSS flex模型,解决100%高度问题变得非常非常容易:使用 height: 100%; display: flex在父母,和 flex: 1 关于儿童元素。它们会自动占用容器中的所有可用空间。

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

flex模型是 所有主流浏览器都支持 以及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>

了解有关的更多信息 flex模型 这里。


86
2018-06-12 14:14



警告:当其中一个左/右容器的内容超过原始身高时,相反的容器将不会调整大小,因此容器最终会达到不同的高度。 - schellmax
问题示例Schellmax指出: jsfiddle.net/Arete/b4g0o3pq - Arete


你没有提到一些重要的细节,如:

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

这是一种可能性:

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>

根据需要固定哪些色谱柱和哪些色谱柱是液体,有许多变化。您也可以使用绝对定位来完成此操作,但我通常会使用浮点数找到更好的结果(特别是在跨浏览器方面)。


48
2017-10-15 23:13





您可以使用 vh 在这种情况下相对于 高度的1% 的视口。

这意味着如果你想覆盖高度,只需使用 100vh

看看我在这里为你画的图片:

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

试试我为您创建的代码段,如下所示:

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


41
2018-06-03 17:43



如果您的内容超出100%宽度和高度会发生什么,请说一个包含100列和1000行的表格 - PirateApp