如何使 div 成为浏览器窗口的 100% 高度-解网

问：

我有一个包含两列的布局 - 左列和右列.divdiv

右侧有一个灰色，我需要它根据用户浏览器窗口的高度垂直展开。现在，在最后一段内容结束。divbackground-colorbackground-colordiv

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

HTML CSS 高度

9赞 Ivan Nevostruev 10/16/2009

愿你会发现这个问题很有用 stackoverflow.com/questions/1366548/......

0赞 see sharper 6/1/2015

好办法，但众所周知，vh、vw 等单位都是有问题的。如果你需要它，这里有这个轻量级的 js 替代方案：joaocunha.github.io/vunit

0赞 Michael Benjamin 8/26/2015

以下是对带有百分比值的 CSS 属性的简单明了的解释： stackoverflow.com/a/31728799/3597276height

13赞 Vishnu Chauhan 9/4/2018

可以使用高度：100VH;CSS 属性

0赞 Mahen 7/20/2021

尝试使用这个最小高度：100vh

答：

315赞 Tinister 10/16/2009 #1

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

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

会这样做的。

22赞 Ricky Boyce 12/18/2014

其工作原理是将元素从文档流中取出，并将其底部值固定到其父元素的高度。当您的内容超过其父级的高度时，这并不理想。

2赞 Seika85 7/1/2016

当其中一个父项设置为并且其高度不是视口的 100% 时，这是行不通的。它将调整顶部和底部以使其下一个相对或绝对祖先。position:relative

56赞 cletus 10/16/2009 #2

你没有提到一些重要的细节，比如：

布局宽度是固定的吗？
其中一列或两列的宽度是固定的吗？

这是一种可能性：

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>

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

16赞 Remus Simion 12/11/2011 #3

添加且不指定高度（或将其设置为自动）。它完全为我完成了工作：min-height: 100%

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}

614赞 Ariona Rian 12/11/2011 #4

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

下面是一个示例：

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

128赞 Dany Y 3/28/2013

如果我错了，请纠正我，但我认为您还需要将高度设置为div的所有父级，才能实际工作

0赞 Qwerty 12/22/2013

如果我使用连续设计，这将不起作用：页面 6000px 高度，块代表页面。我希望一个块正好是视口的高度。

0赞 toto_tico 1/2/2014

@DanyY，你是对的。您确实需要将高度设置为div的所有父级，这意味着所有内容都具有屏幕的高度。下面是一个示例。

0赞 Ariona Rian 2/19/2014

这个技巧适用于某些情况，但不适用于某些情况，如果您搜索兼容性或更推荐的方式，您可以查看上面的@James答案:)使用视口百分比方法:)，这也应该有效。干杯

9赞 cameronjonesweb 3/12/2014

@Qwerty，这是解决方案。将 css 设置为：、、。因此，如果您有 3 个部分，它将是html { height: 100%*number of blocks; }body { height: 100%;}#div { height: 100%/number of blocks; }html { height: 300%; } body { height: 100%; } #div { height: 33.3% }

28赞 lukaszkups 1/28/2013 #5

试试这个 - 经过测试：

body {
  min-height: 100%;
}

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

在以后的版本中，您可以使用：vh

#right, #left {
  height: 100vh
}

-2赞 zurfyx 4/30/2013 #6

尽管这个解决方案是用jQuery完成的，但我认为它对任何做列以适应屏幕尺寸的人来说可能是有用的。

对于从页面顶部开始的列，此解决方案是最简单的。

body, html {
  height: 100%;
}

div#right {
  height: 100%
}

对于不是从页面顶部开始的列（例如：如果它们从标题下方开始）。

<script>
     $(document).ready(function () {
         var column_height = $("body").height();
         column_height = column_height - 100; // 100 is the header height
         column_height = column_height + "px";
         $("#column").css("height",column_height);
    });
</script>

第一种方法将主体高度应用于它和列，这意味着 starting_pixels + 。height100%

第二种方法通过获取正文的高度来获取向用户显示的页面高度，然后减去页眉大小以了解显示列的剩余高度。

0赞 Rob 5/20/2013

我做了一些编辑，但这是使 div 与窗口大小相同并且动态工作良好的好方法。100% 只会渲染一次，因此多个屏幕不起作用。我还会添加一个$（window）.resize（function（） {。它看起来和我添加的一样。

4赞 Dan Dascalescu 11/7/2014

无需 JavaScript。现代解决方案是使用更简单的 CSS 弹性框模型。

1赞 FranSanchis 7/7/2020

添加像 Jquery 这样的外部库来解决 100% CSS 问题是没有用的，也可以在纯 javascript 中完成相同的脚本。

3296赞 James Donnelly 5/30/2013 #7

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

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

什么是视口百分比长度？

从上面链接的 W3 候选建议中：

视口百分比长度与初始包含块的大小有关。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。

这些单位是（视口高度）、（视口宽度）、（视口最小长度）和（视口最大长度）。vhvwvminvmax

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

对于这个问题，我们可以使用：等于视口高度的 1%。也就是说，等于浏览器窗口的高度，无论元素在 DOM 树中的哪个位置：vh1vh100vh

[HTML全文]

<div></div>

CSS的

div {
    height: 100vh;
}

从字面上看，这就是所需要的。下面是一个正在使用的 JSFiddle 示例。

哪些浏览器支持这些新设备？

目前，除Opera Mini之外，所有最新的主流浏览器都支持此功能。请查看 Can I use... 以获得进一步的支持。

如何将其与多列一起使用？

对于手头的问题，具有左分隔线和右分隔线，下面是一个 JSFiddle 示例，显示了一个包含和的两列布局。vhvw

与有何不同？`100vh100%`

以以下布局为例：

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

此处的标记设置为 100% 高度，但由于其包含的高度为 200 像素，因此 200 像素的 100% 将变为 200 像素，而不是高度的 100%。相反，使用意味着无论高度如何，标记都将是的 100% 高度。看看这个随附的 JSFiddle 就很容易看出其中的区别了！pdivbody100vhpbodydiv

69赞 wdm 8/18/2013

当元素实际上高于视口时，滚动行为很奇怪。容器保持视口高度，内容从容器中流出。似乎可以解决这个问题。min-height:100vh

1赞 James Donnelly 7/4/2014

@DGDD接着说：这里还有很多其他的解决方案，早在IE5中就已经起作用了，所以我没有必要重复其他人已经说过的话。对于自该规范首次推出以来过去 3 年发布的大多数浏览器来说，这个答案已经足够可靠了。

9赞 James Donnelly 7/4/2014

@DGDD这适用于 iOS Safari 6+、Android 浏览器 4.4+、BlackBerry 浏览器 10.0 和 IEMobile 10.0。我不知道你指的是哪个移动浏览器，但这 4 个占使用的移动浏览器的 90% 以上。此问题未指定在移动浏览器上工作的要求。

1赞 James Donnelly 5/7/2015

@robross0606，这不是我在这里回答的问题。这是一个完全不同的问题，其答案确实使用了 flexbox：stackoverflow.com/questions/90178/......

6赞 Offirmo 2/22/2018

移动警报：将 vh 混淆与 Chrome 移动版一起使用，这没有考虑其导航栏。然后，它用它覆盖页面的顶部。如果你那里有菜单，这是一个严重的问题......

11赞 testing 6/12/2013 #8

这对我有用：

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

摘自此页面。

124赞 Airen 6/12/2013 #9

与 flex 模型解决方案相比，所有其他解决方案（包括得票最高的解决方案）都不是最优的。vh

随着 CSS flex 模型的出现，解决 100% 高度问题变得非常非常容易：在父元素和子元素上使用。它们将自动占用容器中的所有可用空间。height: 100%; display: flexflex: 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 模型的更多信息。

5赞 schellmax 12/14/2015

警告：当其中一个左/右容器的内容超过原始主体高度时，对面的容器不会调整大小，因此容器最终会有不同的高度。

1赞 Arete 9/13/2016

Schellmax指出的问题示例：jsfiddle.net/Arete/b4g0o3pq

0赞 Evi Song 9/8/2018

根据设计，可以避免“容器超过原来的主体高度”。overflow-y: auto;

0赞 bebbo 2/24/2022

还需要bodymargin: 0px

42赞 Majda 7/28/2013 #10

这对我有用：

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

使用代替，这样即使您向下滚动，除法也会扩展到屏幕的末尾。position:fixedposition:absolute

2赞 Mannyfatboy 2/24/2020

此代码带有“position： [ fixed |absolute]“非常适合弹出窗口的背景（例如当您单击以缩放图片时），但在需要实际向下滚动的情况下则不太确定。仍然有用的面团！

31赞 Jonas Sandstedt 8/22/2013 #11

这是高度的修复。

在你的CSS中使用：

#your-object: height: 100vh;

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

添加此脚本（以添加检测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;
});

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

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

2赞 John Smith Optional 9/12/2013 #12

如果你使用和 jQuery，你可以使用position: absolute;

$("#mydiv").css("height", $(document).height() + "px");

3赞 Dan Dascalescu 11/7/2014

不需要 JavaScript。现代解决方案是使用 CSS 弹性框模型。

0赞 5/9/2016

如果你使用的是JS，我发现这非常有用。注意：最好将其与 $（ window ）.load（）一起使用，因为使用 F5 或 CTRL+F5 返回不同的结果。查看此链接以获取更多信息。stackoverflow.com/questions/13314058/......

0赞 Tony Smith 4/19/2014 #13

简单：

html,
body {
  height: 100%;
  min-height: 100%;
}
body {
  position: relative;
  background: purple;
  margin: 0;
  padding: 0;
}
.fullheight {
  display: block;
  position: relative;
  background: red;
  height: 100%;
  width: 300px;
}

<html class="">

<body>
  <div class="fullheight">
    This is full height.
  </div>
</body>

</html>

3赞 Dan Dascalescu 11/7/2014

相当复杂。现代解决方案是使用更简单的 CSS 弹性框模型。

2赞 SK-the-Learner 3/22/2021

@DanDascalescu无需使用 Flexbox。在CSS中就足够了。height:100vh;

6赞 robross0606 5/7/2015 #14

使用 FlexBox CSS

Flexbox 非常适合此类问题。虽然 Flexbox 主要以在水平方向上布局内容而闻名，但实际上在垂直布局问题上同样有效。您所要做的就是将垂直部分包裹在一个 flex 容器中，然后选择要扩展的部分。它们将自动占用容器中的所有可用空间。

5赞 Prabhakar 10/16/2015 #15

你需要做两件事，一是将高度设置为100%，你已经这样做了。其次是将位置设置为绝对。这应该可以解决问题。

html,
body {
  height: 100%;
  min-height: 100%;
  position: absolute;
}

源

4赞 avalanche1 2/4/2016

过时的解决方案。请改用。vh

3赞 Alexander Kim 5/24/2019

如果您打算在移动设备上使用响应式设计，请不要使用。vh

7赞 Stickers 1/26/2016 #16

其中一个选项是使用 CSS 表。它具有出色的浏览器支持，甚至可以在 Internet Explorer 8 中使用。

JSFiddle 示例

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: table;
  width: 100%;
  height: 100%;
}
.left, .right {
  display: table-cell;
  width: 50%;
}
.right {
  background: grey;
}

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

11赞 Mohammed Javed 4/14/2016 #17

尝试设置height:100%html & body

html, 
body {
    height: 100%;
}

如果要 2 div 高度相同，请使用或设置父元素属性。display:flex

0赞 Peter Mortensen 1/18/2023

最后一句话是难以理解的（使用机器翻译？你能修复它吗？提前致谢。

151赞 DjaouadNM 5/4/2016 #18

您可以在 CSS 中使用视口单元：

HTML格式：

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

CSS：

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

2赞 Luca Steeb 1/23/2017

@Lamar您应该使用以防止这种情况发生。* { box-sizing: border-box; }

2赞 Dave Everitt 2/16/2017

值得检查 caniuse 是否支持视口单元的浏览器：caniuse.com/#feat=viewport-units

12赞 Santosh Khalse 1/4/2017 #19

有几种方法可用于将 a 的高度设置为 100%。<div>

方法（A）：

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100%;
  width: 50%;
  background: green;
}
.div-right {
  height: 100%;
  width: 50%;
  background: gray;
}

<div class="div-left"></div>
<div class="div-right"></div>

方法（B）使用vh：

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100vh;
  width: 50%;
  background: green;
  float: left;
}
.div-right {
  height: 100vh;
  width: 50%;
  background: gray;
  float: right;
}

<div class="div-left"></div>
<div class="div-right"></div>

方法（c）使用弹性盒：

html,
body {
  height: 100%;
  min-height: 100%;
}
.wrapper {
  height: 100%;
  min-height: 100%;
  display: flex;
}
.div-left {
  width: 50%;
  background: green;
}
.div-right {
  width: 50%;
  background: gray;
}

<div class="wrapper">
  <div class="div-left"></div>
  <div class="div-right"></div>
</div>

4赞 ProblemChild 4/18/2017 #20

尝试以下 CSS：

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

144赞 Alireza 6/4/2017 #21

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

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

请看下面我在这里为你画的图片：

试试我为你创建的片段，如下所示：

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

3赞 Learner 11/19/2019

给 100vh 为页面添加了一个垂直滚动，所以遵循了这个，但没有用。stackoverflow.com/questions/44645465/....有没有办法避免垂直滚动并让 div 在没有任何内容的情况下触及底部？

0赞 Legends 12/12/2019

@DILEEPTHOMAS寻找现有的paddings/margins

0赞 Learner 12/13/2019

@Legends根文件，我尝试以 * {margin： 0， padding： 0} 的形式给出，但没有用

2赞 Legends 12/13/2019

@DILEEPTHOMAS看一下 Alireza 提供的这个例子，它也有一个滚动条，因为 body 元素有一个边距。如果删除边距，滚动条将消失。它可能有不同的原因，但我会先检查一下。

9赞 User128848244 6/12/2017 #22

这里的内容与您之前的答案不完全相同，但可能对某些人有所帮助：

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0px;
}

#one {
  background-color: red;
}

#two {
  margin-top: 0px;
  background-color: black;
  color: white;
  overflow-y: scroll;
}

https://jsfiddle.net/newdark/qyxkk558/10/

29赞 Руслан 9/27/2017 #23

100vw = 视口宽度的 100%。

100vh = 视口高度的 100%。

如果要将浏览器窗口大小的宽度或高度设置为100%，则应使用：div

宽度：100vw

对于高度：100vh

或者，如果要将其设置为较小的大小，请使用 CSS 函数。例：calc

#example {
    width: calc(100vw - 32px)
}

8赞 Michael Benjamin 10/3/2017 #24

默认情况下，块元素会占用其父元素的整个宽度。

这就是它们如何满足其设计要求，即垂直堆叠。

9.4.1 块格式化上下文

在块格式上下文中，框一个接一个地排列，垂直方向，从包含块的顶部开始。

但是，此行为不会扩展到高度。

默认情况下，大多数元素都是其内容的高度（）。height: auto

与宽度不同，如果需要额外的空间，则需要指定高度。

因此，请记住以下两点：

除非需要全宽，否则需要定义块元素的宽度
除非需要内容高度，否则需要定义元素的高度

.Contact {
  display: flex;     /* full width by default */
  min-height: 100vh; /* use full height of viewport, at a minimum */
}

.left {
  flex: 0 0 60%;
  background-color: tomato;
}

.right {
  flex: 1;
  background-color: pink;
}

body { margin: 0; } /* remove default margins */

<div class="Contact">
  <section class="left">
    <div class="">
      <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
    </div>
  </section>
  <section class="right">
    <img />
  </section>
</div>

5赞 Thuc Nguyen 10/29/2017 #25

您可以使用和display: flexheight: 100vh

html, body {
  height: 100%;
  margin: 0px;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}

<div class="left">left</div>
<div class="right">right</div>

1赞 TylerH 1/4/2018

已经发布了几个 flexbox 解决方案，其中一个与此完全相同的实现仅在此答案前 26 天发布。

7赞 khalifeh 3/10/2018 #26

只需使用“vh”单位而不是“px”，即视口高度。

height: 100vh;

5赞 RamNiwas Sharma 4/30/2018 #27

.wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  height: 100vh; /* Height window (vh) */
}
.wrapper .left{
  width: 80%; /* Width optional, but recommended */
}
.wrapper .right{
  width: 20%; /* Width optional, but recommended */
  background-color: #DD1F26;
}

<!--
vw: hundredths of the viewport width.
vh: hundredths of the viewport height.
vmin: hundredths of whichever is smaller, the viewport width or height.
vmax: hundredths of whichever is larger, the viewport width or height.
-->
<div class="wrapper">
  <div class="left">
    Left
  </div>
  <div class="right">
    Right
  </div>
</div>

1赞 Peter Mortensen 7/9/2019

可能的拼写错误：（接近结尾）widht

3赞 Rudra 5/22/2018 #28

这些东西会根据您的浏览器。我希望这对你有用。试试这个例子下面给出。

您只需要设置 .height:100%

html,body {
  height: 100%;
  margin: 0;
}
.content {
  height: 100%;
  min-height: 100%;
  position: relative;
}
.content-left {
  height: auto;
  min-height: 100%;
  float: left;
  background: #ddd;
  width: 50%;
  position: relative;
}

#one {
  background: url(http://cloud.niklausgerber.com/1a2n2I3J1h0M/red.png) center center no-repeat scroll  #aaa;
  width: 50%;
  position: relative;
  float: left;
}

#two {
 background: url(http://cloud.niklausgerber.com/1b0r2D2Z1y0J/dark-red.png) center center no-repeat scroll #520E24;
  width: 50%;
  float: left;
  position: relative;
  overflow-y: scroll;
}

<div class='content' id='one'></div>
<div class='content-left' id='two'></div>

5赞 Jamal S 8/22/2018 #29

实际上，对我来说最好的是使用该物业。vh

在我的 React 应用程序中，我希望 div 即使在调整大小时也能与页面匹配。我试过了，但是当设置它按预期工作时，它们都没有工作。height: 100%;overflow-y: auto;height:(your percent)vh;

注意：如果您使用的是填充、圆角等，请确保从属性百分比中减去这些值，否则会增加额外的高度并显示滚动条。这是我的示例：vh

.frame {
  background-color: rgb(33, 2, 211);
  height: 96vh;
  padding: 1% 3% 2% 3%;
  border: 1px solid rgb(212, 248, 203);
  border-radius: 10px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 100px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);
}

0赞 Neek 6/15/2019

顺便说一句，您提到“圆角”会影响元素的高度，我希望设置可以克服这一点，这意味着在计算元素的大小（宽度和高度）时也会考虑边框大小。box-sizing: border-box;

0赞 mohammad nazari 9/8/2018 #30

您可以使用以下 CSS 将 div 设置为浏览器窗口高度的 100%：

display: block;
position: relative;
bottom: 0;
height: 100%;

26赞 Dinesh Pandiyan 11/19/2018 #31

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

指定时，表示“从窗口的父元素或宽度中占用 100% 的可用宽度”。width: 100%

指定时，它仅表示“占用父元素可用高度的 100%”。这意味着，如果您没有在顶级元素中指定高度，则所有子元素的高度将是父元素的高度或高度，这就是为什么您需要将最顶层元素设置为具有窗口高度的原因。height: 100%0min-height

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

body {
  min-height: 100vh;
}

7赞 Sunil R. 12/3/2019 #32

试试一次...

* {
  padding: 0;
  margin: 0;
}

.parent_div {
  overflow: hidden;
  clear: both;
  color: #FFF;
  text-align: center;
}

.left_div {
  float: left;
  height: 100vh;
  width: 50%;
  background-color: blue;

}

.right_div {
  float: right;
  height: 100vh;
  width: 50%;
  background-color: green;
}

<div class=" parent_div">
  <div class="left_div">Left</div>
  <div class="right_div">Right</div>
</div>

15赞 EMILO 1/9/2020 #33

最简单的方法就是这样做。

div {
    background: red;
    height: 100vh;
}

body {
    margin: auto;
}

<div></div>

-1赞 youcantryreachingme 2/24/2020 #34

非常简单的解决方案，支持跨域，还支持浏览器调整大小。

<div style="height: 100vh;">
   <iframe src="..." width="100%" height="80%"></iframe>
</div>

根据需要调整 iframe height 属性（将该属性保留为 100vh）。divheight

为什么是80%？在我的实际场景中，我在之前有一个标题，它占用了一些垂直空间 - 所以我将设置为使用 80% 而不是 100%（否则它将是包含的高度，但在标题之后开始，并从底部溢出）。diviframeiframedivdiv

29赞 machineghost 3/13/2020 #35

即使这里有所有的答案，我还是惊讶地发现没有一个真正解决了这个问题。如果我使用 /，则当内容长于页面时，布局会中断。如果我改用 /，则当内容小于页面高度时，布局会中断。100vhheightmin-height100%heightmin-height

我找到的解决方案解决了这两种情况，是将前两个答案结合起来：

html, body, #mydiv {
  height: 100%;
  min-height: 100vh;
}

4赞 remjx 3/27/2020

我有一个固定的 90px 高度导航栏，所以我只需要将您的“100vh”更改为“calc（100vh - 90px）”

21赞 SK-the-Learner 3/19/2021 #36

一个完整的页面被称为“视口”，你可以根据它在 CSS 3 中的视口来设计一个元素。

此类单位称为视口百分比长度，并且与初始包含块的大小相关。

Viewport-Height 称为。页面的完整高度为 100vh。vh
Viewport-Width 称为。页面的完整高度为 100大众。vw
还存在 vmin（视口最小长度）和 vmax（视口最大长度）。

所以现在，你的问题可以通过在你的CSS中添加以下内容来轻松解决：

.classname-for-right-div /* You could also use an ID */ {
  height: 100vh;
}

以下是有关视口相对长度的信息。

5赞 Priya Maheshwari 8/16/2021 #37

现在使用 height： 100vh; 对于固定的窗口高度：

<style>
    .header-top {
        height: 100vh;
        background: #000;
        color: #FFF;
        display: flex;
        align-items: center;
        padding: 10px;
        justify-content: space-around;
    }

    .header-top ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
    }

    .header-top ul li {
        padding:0px 10px;
    }
</style>

<div class="header-top">
    <div class="logo">Hello</div>
    <ul>
        <li>Menu</li>
        <li>About Us</li>
        <li>Contact US</li>
        <li>Login</li>
    </ul>
</div>

14赞 Sunderam Dubey 2/3/2022 #38

如果将 html 和 body_ 高度设置为 100%，它将覆盖整个页面。

如果您将任何特定的 div 最小高度设置为 100%，那么它将覆盖整个窗口，如下所示：

CSS的

html, body {
  height: 100%;
}

div#some-div {
  min-height: 100%;
}

记得

只有当 div 的直接父级是 body 时，这才有效，因为百分比总是从直接父级继承，并且通过执行上述 CSS 代码，您告诉 div 从直接父级（body）继承 100% 的高度，并使其成为您的最小高度：100%。

另一种方式

只需将 div 高度设置为 100vh。这意味着 100 视口高度。

CSS的

div#some-div {
  height: 100vh
}

0赞 David Tedman-Jones 8/11/2022

另请注意，这将不起作用 - 否则需要设置为的孩子不会调整大小minHeight: 100vhheight: 100vhheight: 100%

0赞 Sunderam Dubey 8/11/2022

@DavidJones 你是否正确地查看了问题和答案，我没有在答案的任何地方使用。问题是如何使 div 100% 的浏览器窗口。min-height:100vh

0赞 denoryprogrammer 2/7/2023 #39

也尝试在身体上使用“身高：100%”。

0赞 Jack Smith 2/23/2023 #40

您只需在页面正文中添加填充和边距即可：

在 CSS 中：

body {
    padding: 0px;
    margin: 0px;
}

然后重试 width： 100%; 再次，它应该可以正常工作。

11赞 MAZ 4/25/2023 #41

2023 更新

在移动设备上使用 100vh 设置元素的高度是不可靠的，因为浏览器 UI 可能会占用一些屏幕尺寸。到目前为止，计算实际高度的唯一方法是使用 JavaScript。但是，随着 2023 年新单位的引入，例如 dvh、lhv 和 svh，现在可以在不需要 JavaScript 的情况下实现动态高度。谷歌它以了解有关这些单位的更多信息。

新代码示例：

.yourElement {
  height: 100vh; /* fallback */
  height: 100dvh; /* dynamic viewport height */
}

3赞 Asker 6/21/2023 #42

令人惊讶的是，到目前为止，>30 个答案中没有一个给出最佳解决方案：

min-height: 100vh

0赞 Tariqul Islam 12/13/2023 #43

html, body {
  height: 100%;
  margin: 0;
}

.container {
  display: flex;
  min-height: 100vh;
}

.left-div {
  flex: 1;
  /* Other styles for left div */
}

.right-div {
  flex: 1;
  background-color: grey;
  /* Other styles for right div */
}

<div class="container">
  <div class="left-div">
    <!-- Content for left div -->
  </div>
  <div class="right-div">
    <!-- Content for right div -->
  </div>
</div>

上一个：如何使用 CSS 将文本垂直居中？[复制]

下一个：CSS中的边距和填充有什么区别？

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

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

评论

评论

评论

评论

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

什么是视口百分比长度？

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

[HTML全文]

CSS的

哪些浏览器支持这些新设备？

如何将其与多列一起使用？

与有何不同？`100vh100%`

评论

评论

评论

评论

评论

评论

评论

评论

评论

评论

评论

评论

评论

评论

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

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

评论

评论

评论

评论

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

什么是视口百分比长度？

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

[HTML全文]

CSS的

哪些浏览器支持这些新设备？

如何将其与多列一起使用？

与 有何不同？100vh100%

评论

评论

评论

评论

评论

评论

评论

评论

评论

评论

评论

评论

评论

评论

与有何不同？`100vh100%`