关于HTML：如何生成一个DIV 100%高度的浏览器窗口？


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

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

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

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

相关讨论

有两个CSS3测量单位称为：

视区百分比(或视区相对)长度视区百分比长度是多少？

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

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

这些单位是EDOCX1(视区高度)、EDOCX1(视区宽度)、EDOCX1(视区最小长度)和EDOCX1(视区最大长度)。

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

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

HTML

1
 

CSS

1
2
3
div {
    height:100vh;
}

这是所有需要的。下面是一个正在使用的JSfiddle示例。

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

除Opera Mini外，目前所有最新的主要浏览器都支持此功能。我能用一下吗？进一步支持。

如何将其用于多个列？

对于手头的问题(具有左右分隔符)，这里有一个JSfiddle示例，它显示了包含vh和vw的两列布局。

100vh与100%有什么不同？

以这个布局为例：

1
2
3
4
5
6
<body style="height:100%">
   
        <p style="height:100%; display:block;">Hello, world!
</p>
   
</body>

此处的p标记设置为100%高度，但由于包含div的标记具有200px高度，200px的100%变为200px，而不是body高度的100%。使用100vh表示，无论div高度如何，p标签将是body的100%高度。看看这个附带的jsiddle，就可以很容易地看到不同之处！

相关讨论

如果要设置或任何元素的高度，也应将和的高度设置为100%。然后您可以将元素的高度设置为100%：)

下面是一个例子：

1
2
3
4
5
6
7
body, html {
  height: 100%;
}

#right {
  height: 100%;
}
相关讨论

如果你能完全定位你的元素，

1
2
3
position: absolute;
top: 0;
bottom: 0;

会的。

相关讨论

您可以使用CSS中的视图端口单元：HTML：

1
Hello World!

CSS：

1
2
3
#my-div {
    height:100vh; /*vh stands for view-port height, 1vh is 1% of screen height*/
}
相关讨论

与flex模型解决方案相比，所有其他解决方案(包括使用vh)的投票结果最高的解决方案)都是次优的。

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

注意标记和CSS有多简单。桌上没有黑客之类的东西。

所有主要浏览器以及IE11+都支持flex模型。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
html, body {
  height: 100%;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}
1
2
left
right

在此了解有关flex模型的更多信息。

相关讨论

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

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

看看我给你画的图片：

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

尝试我为您创建的代码片段，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
.left {
  height: 100vh;
  width: 50%;
  background-color: grey;
  float: left;
}

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

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

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

有一种可能性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
  Example
</head>

<body>
 
   
      Left
   

   
 
</body>

</html>

根据需要固定的柱和液体的不同，这方面有很多变化。您也可以使用绝对定位来实现这一点，但我通常使用浮动来获得更好的结果(特别是在跨浏览器方面)。

这是高度的固定值。

在CSS中使用：

1
#your-object: height: 100vh;

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

添加此脚本(为vh-units添加检测)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 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中：

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

这就是我的工作：

1
 

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

100%的宽度和高度不同。

当您指定width: 100%时，它意味着"从父元素或窗口宽度中占用可用宽度的100%。

当您指定height: 100%时，它只意味着"从父元素中占用可用高度的100%"。这意味着如果您不在顶级元素中指定高度，则所有子元素的高度都将是0或父元素的高度，这就是为什么您需要将最顶端的元素设置为具有min-height的窗口高度。GTT。

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

1
2
3
body {
  min-height: 100vh;
}

添加min-height: 100%，不要指定高度(或将其设置为自动)。它完全帮了我的忙：

1
2
3
4
5
6
7
.container{    
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}

100vw==视区宽度的100%。

100vh==100%视区高度。

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

宽度：100vw。

高度：100vh。

或者，如果要将其设置为较小的大小，请使用css calc function。例子：

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

这对我很有用：

1
2
3
4
5
6
7
8
9
10
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 */
}

从本页中删除。

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

1
2
3
4
html,
body {
    height: 100%;
}

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

有几种方法可以将的高度设置为100%。

方法(a)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100%;
  width: 50%;
  background: green;
}
.div-right {
  height: 100%;
  width: 50%;
  background: gray;
}
1
 

使用VH的方法(b)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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;
}
1
 

方法(c)使用柔性盒：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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;
}
1
 

只需使用"vh"单元而不是"px"，这意味着视图端口高度。

1
height:100vh;

使用FRASBOX CSS

flexbox非常适合这种类型的问题。虽然flexbox主要以水平方向的内容布局著称，但实际上它也适用于垂直布局问题。您所要做的就是将垂直部分包装在一个灵活的容器中，并选择要展开的部分。它们会自动占用容器中的所有可用空间。

其中一个选项是使用CSS表。它有很好的浏览器支持，甚至可以在IE8中使用。

JSfiddle示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: table;
  width: 100%;
  height: 100%;
}
.left, .right {
  display: table-cell;
  width: 50%;
}
.right {
  background: grey;
}
1
 

块元素默认使用其父元素的整个宽度。

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

9.4.1 Block formatting
contexts

In a block formatting context, boxes are laid out one after the other,
vertically, beginning at the top of a containing block.

但是，这种行为不会延伸到高度。

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

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

因此，记住这两件事：

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.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 */
1
2
3
4
5
6
7
8
  <section class="left">
   
      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.
   
  </section>
  <section class="right">
    <img />
  </section>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
html, body {
  height: 100%;
  margin: 0px;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}
1
2
left
right

相关讨论

尝试此-测试：

1
2
3
4
5
6
7
body {
  min-height: 100%;
}

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

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

1
2
3
4
5
6
html,
body {
  height: 100%;
  min-height: 100%;
  position: absolute;
}

来源

相关讨论

尝试以下CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
html {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
}

#right {
    min-height: 100%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
 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.  


 
  Left
 
 
    right

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>

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

1
$("#mydiv").css("height", $(document).height() +"px");
相关讨论

实际上，对我最有效的是使用vh属性，在我的react应用程序中，即使调整了大小，尝试的高度为100%；，overflow-y:auto；，也不需要在设置高度(您的百分比)vh时使用任何一个，它按预期工作。注意：如果使用填充、圆角等，请确保从VH属性百分比中减去这些值，或者添加额外的高度并使滚动条显示，下面是我的示例：

1
2
3
4
5
6
7
8
9
10
11
12
.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);

}

最容易的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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;
}
1
2
3
4
5
6
7
8
9
<html class="">

<body>
 
    This is full height.
 
</body>

</html>

相关讨论

这里有些东西和你上面的不完全一样，但对某些人有帮助。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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/

This stuff will resize height of content automatically according to
your Browser. I hope this will work for you. Just try this example
given bellow.

您只需设置height:100%。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
  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;  
}
1
 

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

1
2
3
4
display: block;
position: relative;
bottom: 0;
height: 100%;

尽管这个解决方案是用jquery i完成的，但是它对于任何做列以适应屏幕大小的人都是有用的。

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

1
2
3
4
5
6
7
body,html{
  height:100%;
}

div#right{
  height:100%
}

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

1
2
3
4
5
6
     $(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);
    });

第一种方法将体高应用于它和列，也就是说，从"像素+EDOCX1"(4)开始。

第二种方法是通过获取正文的高度来获取显示给用户的页面高度，然后减去标题大小来知道还有多少高度可以显示该列。

相关讨论