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

Posted 2023-03-06

技术标签:

【中文标题】如何使浏览器窗口的 div 高度为 100%【英文标题】：How to make a div 100% height of the browser window 【发布时间】：2010-12-07 04:53:47 【问题描述】：

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

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

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

【问题讨论】：

希望你会发现这个问题有用***.com/questions/1366548/… 好方法，但众所周知，vh、vw 等单位有问题。如果你需要的话，有这个轻量级的 js 替代品：joaocunha.github.io/vunit 这里有一个简单清晰的 CSS height 属性和百分比值的解释：***.com/a/31728799/3597276 你可以使用 height: 100vh; CSS 属性尝试使用这个 min-height:100vh 【参考方案1】：

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

Viewport-Percentage (or Viewport-Relative) Lengths

什么是视口百分比长度？

来自上面链接的 W3 候选推荐：

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

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

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

对于这个问题，我们可以利用vh：1vh等于视口高度的1%。也就是说100vh等于浏览器窗口的高度，不管元素在DOM树中的什么位置：

html

<div></div>

CSS

div 
    height: 100vh;

这实际上就是所有需要的。这是正在使用的JSFiddle example。

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

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

这如何与多列一起使用？

在手头的问题中，有一个左右分隔符，这是一个JSFiddle example，它显示了一个包含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像素，不是@的100% 987654343@高度。改用100vh 意味着p 标记将是body 的100% 高度，而不管div 高度如何。看看这个accompanying JSFiddle 就能轻松看出区别！

【讨论】：

当元素实际上比视口高时滚动的奇怪行为。容器保持视口高度，内容流出容器。 min-height:100vh 似乎可以解决这个问题。 @DGDD 后续：这里有很多其他解决方案可以追溯到 IE5，所以我没有必要重复其他人已经说过的话。对于自该规范首次引入以来最近 3 年发布的大多数浏览器来说，这个答案已经足够可靠了。 @DGDD 这适用于 ios Safari 6+、android Browser 4.4+、BlackBerry Browser 10.0 和 IEMobile 10.0。我不知道您指的是哪种移动浏览器，但这 4 种占使用的移动浏览器的 90% 以上。此问题未指定在移动浏览器上工作的要求。 @robross0606 这不是我在这里回答的问题。这完全是一个不同的问题，其答案确实使用了 flexbox：***.com/questions/90178/… 移动警报：在没有考虑其导航栏的 Chrome 移动设备上使用 vh mess。然后它会用它覆盖您的页面顶部。如果那里有菜单，这是一个严重的问题......【参考方案2】：

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

这是一个例子：

body, html 
  height: 100%;


#right 
  height: 100%;

【讨论】：

如果我错了，请纠正我，但我认为您还需要为 div 的所有父级设置高度，才能实际工作如果我使用连续设计，这将不起作用：页面 6000 像素高度，块代表页面。我希望一个块正好是视口的高度。 @DanyY，你是对的。您确实需要为 div 的所有父级设置高度，这意味着所有内容都具有屏幕高度。这是example。这个技巧在某些情况下有效，但在某些情况下也无效，如果您搜索兼容性或更推荐的方式，您可以查看上面的@James's Answer :) Using Viewport Percentage Method :) ,那也应该工作。干杯 @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% 【参考方案3】：

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

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

会做的。

【讨论】：

这通过将元素从文档流中取出并将其底部值固定到其父级的高度来工作。当您的内容超过其父级的高度时，这并不理想。这不起作用，当它的父母之一设置为 position:relative 并且它的高度不是视口的 100% 时。它将根据下一个相对或绝对祖先调整顶部和底部。【参考方案4】：

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

【讨论】：

@Lamar 你应该使用* box-sizing: border-box; 来防止这种情况发生。值得检查 caniuse 在视口单元上的浏览器支持：caniuse.com/#feat=viewport-units【参考方案5】：

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

这意味着如果你想遮住高度，只需使用100vh。

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

试试我为你创建的 sn-p 如下：

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

【讨论】：

Giving 100vh 为页面添加了一个垂直滚动，所以跟着这个但是没有用。 ***.com/questions/44645465/…。有什么办法可以避免垂直滚动，让 div 在没有任何内容的情况下触摸底部？ @DILEEPTHOMAS 寻找现有的paddings/margins @Legends 在根文件中我尝试给出 * margin: 0, padding: 0 但没有用 @DILEEPTHOMAS 看看 Alireza 提供的这个例子，它还有一个滚动条，因为 body 元素有一个边距。如果删除边距，滚动条就消失了。它可能有不同的原因，但我会先检查这个原因。【参考方案6】：

与flex model 解决方案相比，所有其他解决方案（包括vh 投票最多的解决方案）都不是最佳解决方案。

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

请注意标记和 CSS 的简单程度。没有桌子黑客或任何东西。

flex 模型是supported by all major browsers 以及 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 model 的更多信息。

【讨论】：

一句警告：当左/右容器中的一个的内容超过原来的body高度时，对面的容器不会被调整大小，所以容器最终会有不同的高度。 Schellmax 指出的问题示例：jsfiddle.net/Arete/b4g0o3pq 视设计而定，overflow-y: auto; 可能会避免“容器超出原体高度”。【参考方案7】：

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

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

这是一种可能性：

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>

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

【讨论】：

【参考方案8】：

这对我有用：

&lt;div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; background: red;"&gt; &lt;/div&gt;

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

【讨论】：

这个带有“位置：[固定|绝对]”的代码非常适合弹出窗口的背景（比如当你点击放大图片时），但在你实际需要的情况下不太确定向下滚动。还是有用的面团！【参考方案9】：

这是高度的修正。

在你的 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');
    
);

【讨论】：

【参考方案10】：

即使这里有所有的答案，我惊讶地发现没有一个能真正解决问题。如果我使用100vhheight/min-height，则当内容超过一页时，布局就会中断。如果我改为使用100%height/min-height，则当内容小于页面高度时布局会中断。

我发现解决这两种情况的解决方案是结合前两个答案：

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

【讨论】：

我有一个固定高度为 90px 的导航栏，所以我只需将“100vh”更改为“calc(100vh - 90px)”【参考方案11】：

试试这个 - 测试：

body 
  min-height: 100%;


#right, #left 
  height: 100%;

编辑：2020 年更新：

您现在可以使用vh：

#right, #left 
  height: 100vh

【讨论】：

【参考方案12】：

100vw = 视口宽度的 100%。

100vh = 视口高度的 100%。

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

对于宽度：100vw

身高：100vh

或者，如果您想将其设置为更小，请使用 CSS calc 函数。示例：

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

【讨论】：

【参考方案13】：

100% 在宽度和高度上的作用不同。

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

当你指定height: 100%时，它只表示“从父元素占据100%的可用高度”。这意味着如果您没有在***元素中指定高度，则所有子元素的高度将是 0 或父元素的高度，这就是为什么您需要将最顶层元素设置为具有 @987654325 @ 的窗口高度。

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

body 
  min-height: 100vh;

【讨论】：

【参考方案14】：

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

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

【讨论】：

【参考方案15】：

一个完整的页面称为'viewport'，您可以根据CSS3中的viewport设计一个元素。

这样的单位称为视口百分比长度，与初始包含块的大小有关。

视口高度称为vh。页面的完整高度是 100vh。视口宽度称为vw。页面的完整高度是 100 辆。还有vmin（视口最小长度）和vmax（视口最大长度）。

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

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

这里是信息about the Viewport-relative lengths

【讨论】：

【参考方案16】：

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

div 
background: red;
height: 100vh;

body 
margin: 0px;

&lt;div&gt;&lt;/div&gt;

【讨论】：

【参考方案17】：

这对我有用：

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

取自this page。

【讨论】：

【参考方案18】：

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

方法（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>

使用 vh 的方法（B）：

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>

【讨论】：

【参考方案19】：

尝试在html & body 中设置height:100%

html, 
body 
    height: 100%;

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

【讨论】：

【参考方案20】：

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

这就是他们满足设计要求的方式，即垂直堆叠。

9.4.1 Block formatting contexts

在块格式化上下文中，框一个接一个地布置，垂直，从包含块的顶部开始。

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

默认情况下，大多数元素都是其内容的高度 (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>

【讨论】：

【参考方案21】：

这里有一些与您之前的答案不完全一样的东西，但它可能对某些人有所帮助：

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/

【讨论】：

【参考方案22】：

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

height: 100vh;

【讨论】：

【参考方案23】：

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

JSFiddle Example

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>

【讨论】：

【参考方案24】：

试试这个...

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

【讨论】：

【参考方案25】：

Use FlexBox CSS

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

【讨论】：

【参考方案26】：

您可以使用display: flex 和height: 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>

【讨论】：

已经发布了几个 flexbox 解决方案，其中一个在这个答案前 26 天发布了这个确切的实现。【参考方案27】：

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

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

Source

【讨论】：

过时的解决方案。请改用vh。如果您打算在移动设备上使用响应式设计，请不要使用vh。【参考方案28】：

实际上最适合我的是使用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);

【讨论】：

顺便说一句，你提到'圆角'会影响元素的高度，我希望设置box-sizing: border-box; 会克服这个问题，这意味着在计算大小时也会考虑边框大小元素的（宽度和高度）。【参考方案29】：

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

【讨论】：

可能的拼写错误：widht（接近尾声）【参考方案30】：

试试下面的 CSS：

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


body 
    height: 100%;


#right 
    min-height: 100%;

【讨论】：

以上是关于如何使浏览器窗口的 div 高度为 100%的主要内容，如果未能解决你的问题，请参考以下文章

在移动浏览器中隐藏工具栏时使高度为 100%

css CSS：使div为浏览器窗口的100％高度

使用js将div高度设置为100%

如何使 2 列 Bootstrap 网格中的第 2 列与第 1 列的高度相同

如何让 height:100%; 起作用

css如何令页面刚好等於浏览器窗口大小, 不出现滚动条?

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

Viewport-Percentage (or Viewport-Relative) Lengths

什么是视口百分比长度？

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

html

CSS

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

这如何与多列一起使用？

100vh 与 100% 有何不同？

`100vh` 与 `100%` 有何不同？