Viewport-Percentage (or Viewport-Relative) Lengths

Question

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

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

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

Answer 1

有几个CSS3测量单位叫做：

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的高度为200px，因此100％的200px变为200px，不 100％的高度body身高。100vh使用p代替body标记将是div的100％高度，而不管{{1}}高度。看看这个accompanying JSFiddle，可以轻松看到差异！

Answer 2

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

以下是一个例子：

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

Answer 3

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

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

会这样做。

Answer 4

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

Answer 5

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

这意味着如果你想掩盖身高，只需使用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>

Answer 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。

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

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

Answer 8

这对我有用：

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

使用position:fixed代替position:absolute，即使您向下滚动分部也会扩展到屏幕的末尾。

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

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

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

Answer 10

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

指定width: 100%时，它的意思是“占用父元素或窗口宽度的100％可用宽度。”

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

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

body {
  min-height: 100vh;
}

Answer 11

即使这里提供了所有答案，我也惊讶地发现没有一个能真正解决问题。如果我使用100vh height / min-height，则内容长于页面时布局将中断。如果我改用100% height / min-height，则当内容小于页面高度时，布局将中断。

我发现解决了这两种情况的解决方案是结合最重要的两个答案：

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

Answer 12

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

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

Answer 13

最简单的方法就是这样。

div {
background: red;
height: 100vh;
}
body {
margin: 0px;
}

<div></div>

Answer 14

100vw ===视口宽度的100％。

100vh ===视口高度的100％。

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

表示宽度：100vw

高度为

：100vh

或者如果您想将其设置为较小的尺寸，请使用css calc function。例如：

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

Answer 15

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

方法（A）：

＆＃13;

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

＆＃13;

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

＆＃13;

方法（B）使用vh：

＆＃13;

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

＆＃13;

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

＆＃13;

方法（c）使用弹性框：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 16

这对我有用：

html, body {
    height: 100%; /* IMPORTANT!!! stretches viewport to 100% */
}

#wrapper {
    min-height: 100%; /* min. height for modern browser */
    height:auto !important; /* important rule for modern Browser */
    height:100%; /* min. height for IE */
    overflow: hidden !important; /* FF scroll-bar */
}

取自this page。

Answer 17

尝试在height:100%＆amp;中设置html body

html, 
body {
    height: 100%;
}

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

Answer 18

一个完整的页面被称为'viewport'，你可以在CSS3中根据它的viewport来设计一个元素。

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

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

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

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

这里是信息about the Viewport-relative lengths

Answer 19

只使用“vh”单位而不是“px”，这意味着视口高度。

height:100vh;

Answer 20

Use FlexBox CSS

Flexbox非常适合此类问题。虽然Flexbox主要用于在水平方向上布置内容，但Flexbox实际上也适用于垂直布局问题。您所要做的就是将垂直部分包装在Flex容器中，然后选择要扩展的部分。它们会自动占用容器中的所有可用空间。

Answer 21

其中一个选项是使用CSS表。它具有出色的浏览器支持，甚至适用于IE8。

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

Answer 22

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

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

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>

Answer 23

试试这个 - 测试过：

body {
  min-height: 100%;
}

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

Answer 24

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

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

Source

Answer 25

您可以使用display: flex和height: 100vh

＆＃13;

html, body {
  height: 100%;
  margin: 0px;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}

＆＃13;

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

＆＃13;

Answer 26

尝试以下css：

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

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

Answer 27

 html

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

CSS

<style>
  .wrapper {     
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    height:100vh; // height window (vh)

  }
  .wrapper .left{
     widht:80%; // width optional but recommended 
    }
  .wrapper .right{
     widht:20%; // width optional but recommended 
     background-color: #dd1f26;
    }
<style>

Answer 28

尝试一次...

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

Answer 29

实际上最适合我的是使用vh属性，在我的react应用程序中，即使调整大小尝试 height：100％; ， overflow-y，我的div都希望div与页面高匹配：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);

}

Answer 30

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

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

Answer 31

这个东西会根据自动调整内容的高度你的浏览器。我希望这对你有用。试试这个例子吼叫。

您只需设置height:100%。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 32

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

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

Answer 33

这里的内容与您上面的内容不完全相同但可能对某些内容有所帮助。

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/

Answer 34

最简单的：

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

＆＃13;

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

＆＃13;

Answer 35

尽管这个解决方案是使用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%。

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

Answer 36

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

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

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

为什么80％？在我的实际情况中，我在div之前的iframe内有一个标头，它占用了一些垂直空间-因此我将iframe设置为使用80％而不是100％（否则，它将是包含的div的高度，但从标头之后开始，并溢出div的底部。）

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

36 个答案:

Viewport-Percentage (or Viewport-Relative) Lengths

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

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

HTML

CSS

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

如何在多列中使用它？

`100vh`与`100%`的区别如何？

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

36 个答案:

Viewport-Percentage (or Viewport-Relative) Lengths

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

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

HTML

CSS

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

如何在多列中使用它？

100vh与100%的区别如何？

`100vh`与`100%`的区别如何？