关于html：让身体拥有100％的浏览器高度


Make body have 100% of the browser height

我想让身体有100%的浏览器高度。我能用CSS做吗？

我试过设置height: 100%，但不起作用。

我想设置一个页面的背景色来填充整个浏览器窗口，但是如果页面内容很少，我会在底部看到一个难看的白色条。

相关讨论

尝试将HTML元素的高度设置为100%。

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

Body向其父(HTML)寻求如何缩放动态属性，因此HTML元素也需要设置其高度。

但是，主体的内容可能需要动态更改。将最小高度设置为100%将实现此目标。

1
2
3
4
5
6
html {
  height: 100%;
}
body {
  min-height: 100%;
}
相关讨论

除了将html和body元素的高度设置为100%之外，还可以使用视区百分比长度。

5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units

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.

在本例中，可以使用值100vh，它是视区的高度。

这里例子

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

这在大多数现代浏览器中都得到了支持-可以在这里找到支持。

相关讨论

如果您有背景图像，那么您将希望改为设置：

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

这样可以确保当内容高于视区时，您的身体标签可以继续增长，并且当您开始向下滚动时，背景图像可以继续重复/滚动/任何操作。

记住，如果你必须支持IE6，你需要找到一种方法来楔入height:100%的身体，IE6对待height像min-height无论如何。

相关讨论

如果要保留正文上的页边距而不需要滚动条，请使用以下CSS：

1
2
html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; }

设置 body {min-height:100%} 将为您提供滚动条。

参见http://jsbin.com/acadahek/2/edit上的演示？HTML，输出。

相关讨论

1
2
3
4
5
6
html, body
{
  height: 100%;
  margin: 0;
  padding: 0;
}
相关讨论

我在使用的每个CSS文件的开头使用的是以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
html, body{
    margin: 0;

    padding: 0;

    min-width: 100%;
    width: 100%;
    max-width: 100%;

    min-height: 100%;
    height: 100%;
    max-height: 100%;
}

0的边距确保HTML和body元素不会被浏览器自动定位为在它们的左边或右边有一些空间。

0的填充确保HTML和body元素不会因为浏览器默认值而自动向下或向右推它们内部的所有内容。

宽度和高度的变化被设置为100%，以确保浏览器不会在预期实际有一个自动设置的边缘或填充时调整它们的大小，最小和最大设置只是为了防止一些奇怪的、无法解释的事情发生，尽管您可能不需要它们。

这个解决方案也意味着，就像我几年前刚开始使用HTML和CSS时一样，您不必给您的第一个个margin:-8px;，使其适合浏览器窗口的角落。

在我发布之前，我查看了我的另一个全屏幕CSS项目，发现我使用的只是body{margin:0;}，没有其他任何东西，这在我从事这项工作的2年里都很好。

希望这个详细的答案有帮助，我感到你的痛苦。在我看来，浏览器应该在body/html元素的左侧甚至顶部设置一个不可见的边界是愚蠢的。

相关讨论

在测试了各种场景之后，我认为这是最好的解决方案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
html {
    width:100%;
    height: 100%;
    display: table;
}

body {
    width:100%;
    display:table-cell;
}

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

它是动态的，因为如果HTML和body元素的内容溢出，它们将自动展开。我在最新版本的firefox、chrome和ie 11中测试过这个。

在这里看到完整的小提琴(对于那些讨厌桌子的人，你可以随时将其更改为使用一个DIV)：

https://jsfiddle.net/71yp4rh1/9/

尽管如此，这里的答案有几个问题。

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

如果HTML和body元素的内容溢出，使用上面的css将导致它们无法自动展开，如下所示：

网址：https://jsfiddle.net/9vy620m/4/

当你滚动时，注意到重复的背景？这是因为body元素的高度没有因为其子表溢出而增加。为什么它不能像其他块元素一样展开？我不确定。我认为浏览器处理错误。

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

body {
    min-height: 100%;
}

如上图所示，在车身上设置100%的最小高度会导致其他问题。如果执行此操作，则不能指定子DIV或表占用百分比高度，如下所示：

https://jsfiddle.net/aq74v2v7/4/

希望这能帮助别人。我认为浏览器处理错误。我希望身体的高度能在孩子们满溢的情况下自动调整变大。然而，当你使用100%的高度和100%的宽度时，这种情况似乎不会发生。

相关讨论

快速更新

1
2
3
4
html, body{
    min-height:100%;
    overflow:auto;
}

今天的CSS提供了更好的解决方案

1
2
3
4
html, body{
  min-height: 100vh;
  overflow: auto;
}
相关讨论

在这里：

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

body{
  margin:0;
  padding:0
  background:blue;
}

请检查：

1
2
* {margin: 0; padding: 0;}    
html, body { width: 100%; height: 100%;}

或者尝试新方法视区高度：

1
html, body { width: 100vw; height: 100vh;}

Viewport：如果使用视区意味着任何大小的屏幕内容都将达到屏幕的全高。

相关讨论

如果需要，还可以使用JS

1
2
3
4
5
6
7
8
var winHeight = window.innerHeight    ||
document.documentElement.clientHeight ||
document.body.clientHeight;

var pageHeight = $('body').height();
if (pageHeight < winHeight) {
    $('.main-content,').css('min-height',winHeight)
}
相关讨论

只有一行CSS…你才能完成。

1
body{ height: 100vh; }
相关讨论

尝试

1
2
<html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">
相关讨论

如果您不想自己编辑自己的CSS文件和定义高度规则，最典型的CSS框架也解决了这个问题，其中主体元素填充整个页面，以及其他问题，轻松与多种大小的视区。

例如，默认的CSS框架可以解决这个问题，不需要定义任何CSS规则和类，只需在HTML中包含CSS文件。

尝试添加：

1
2
3
body {
height: 100vh;
}
相关讨论

1
2
3
4
5
6
7
8
9
10
11
html {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100%;
}
html body {
    min-height: 100%
}

适用于所有主要浏览器：FF、Chrome、Opera、IE9+。使用背景图像和渐变。滚动条根据内容需要提供。

所有答案都是100%正确的，解释得很好，但我做了一些很好也很简单的事情让它有反应。

在这里，元素将采取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
<style>
.img_wrap{
      width:100%;
      background: #777;
}
.img_wrap img{
      display: block;  
      width: 100px;
      height: 100px;
      padding: 50px 0px;
      margin: 0 auto;
}
.img_wrap img:nth-child(2){
      padding-top: 0;
}
</style>


  <img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
  <img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">



   var windowHeight = $(window).height();
   var elementHeight = $('.img_wrap').height();

   if( elementHeight > windowHeight ){
       $('.img_wrap').css({height:elementHeight});
   }else{
       $('.img_wrap').css({height:windowHeight});
   }

这是JSfiddle演示。

我会用这个

1
2
3
4
5
6
html, body{
      background: #E73;
      min-height: 100%;
      min-height: 100vh;
      overflow: auto; // <- this is needed when you resize the screen
    }

10

浏览器将使用min-height: 100vh，如果浏览器稍微旧一点，min-height: 100%将是回退。

如果您希望在调整屏幕大小(例如移动大小)时，正文和HTML扩展其高度，则需要使用overflow: auto。

这里更新

1
2
3
4
5
6
7
8
9
10
11
html
  {
    height:100%;
  }

body{
     min-height: 100%;
     position:absolute;
     margin:0;
     padding:0;
}

1
2
3
4
5
6
7
8
9
10
@media all {
* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
} }
相关讨论

关于底部的额外空间：您的页面是ASP.NET应用程序吗？如果是这样，那么在标记中可能会有一个包装。别忘了为窗体设置样式。在表单中添加EDOCX1[3]可能会删除底部的多余空间。

相关讨论

CSS3有一种新方法。

10

它使视区100%等于高度。

所以你的代码应该是

1
2
3
 body{
 height:100vh;
 }
相关讨论