使主体有100%的浏览器高度

我想让主体有100%的浏览器高度。我可以用CSS来做吗?

我试着设置高度:100%，但它不起作用。

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

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

html, 
body {
    height: 100%;
}

主体通过其父(HTML)查看如何缩放动态属性，因此HTML元素也需要设置它的高度。

然而，body的内容可能需要动态更改。将min-height设置为100%将实现这一目标。

html {
  height: 100%;
}
body {
  min-height: 100%;
}

2011-07-11 18:53:54

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

2011-07-11 18:54:28

在这里:

html,body{
    height:100%;
}

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

2011-07-11 18:56:14

如果你有一个背景图像，那么你会想要设置这个:

html{
  height: 100%;
}
body {
  min-height: 100%;
}

这可以确保当内容比视口高时，body标签可以继续增长，并且当你开始向下滚动时，背景图像会继续重复/滚动/等等。

记住，如果你必须支持IE6，你需要找到一种楔子在高度:100%的身体，IE6对待高度像最小高度。

2012-11-01 06:55:19

关于底部的额外空间:你的页面是ASP ?网络应用程序?如果是这样，标记中可能几乎所有内容都被包装了。不要忘记设置表单的样式。添加溢出:隐藏;到窗体可能会删除底部的多余空间。

2013-04-11 20:58:01

如果你想保持正文的边缘，不想要滚动条，使用下面的css:

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,output上的演示。

2013-12-01 08:24:55

除了将html和body元素的高度同时设置为100%，你还可以使用viewport-percentage length。

5.1.2. 视口百分比长度:“vw”，“vh”，“vmin”，“vmax”单位 viewport-percentage长度相对于初始包含块的大小。当初始包含块的高度或宽度发生变化时，它们将相应地缩放。

在这个例子中，你可以使用值100vh——这是视口的高度。

例子

body {
  height: 100vh;
  padding: 0;
}

body {
  min-height: 100vh;
  padding: 0;
}

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

2014-09-14 03:39:15

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+。工作与背景图像和梯度。滚动条可根据内容需要使用。

2015-03-25 08:16:23

CSS3有一个新的方法。

 height:100vh

它使ViewPort 100%等于高度。

所以你的代码也应该如此

 body{
 height:100vh; 
 }

2015-05-25 05:04:58

快速更新

html, body{
    min-height:100%;
    overflow:auto;
}

今天的CSS更好的解决方案

html, body{ 
  min-height: 100vh;
  overflow: auto;
}

2015-08-03 22:49:49

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

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时所做的那样，你不必给你的第一个<div>一个边距:-8px;使它适合浏览器窗口的角落。

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

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

2015-10-28 02:32:51

Try

<html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">

2016-01-20 18:52:48

只需要一行CSS就可以完成。

body{ height: 100vh; }

2016-06-23 07:02:54

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

html {
    width: 100%;
    height: 100%;
    display: table;
}

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

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

它是动态的，因为如果html和body元素的内容溢出，它们将自动展开。我在最新版本的Firefox、Chrome和IE 11中进行了测试。

在这里看到完整的小提琴(对于你讨厌桌子的人，你可以随时改变它使用div):

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

话虽如此，这里公布的答案有几个问题。

html, body {
    height: 100%;
}

使用上面的CSS会导致html和body元素不会自动展开，如果它们的内容溢出，如下所示:

https://jsfiddle.net/9vyy620m/4/

当你滚动时，注意到重复的背景了吗?这是因为body元素的高度没有增加，因为它的子表溢出了。为什么它不像其他块元素那样展开?我不确定。我认为浏览器不正确地处理了这个问题。

html {
    height: 100%;
}

body {
    min-height: 100%;
}

如上所示，在body上设置最小高度为100%会导致其他问题。如果你这样做，你不能指定子div或表占用一个百分比高度，如下所示:

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

希望这能帮助到一些人。我认为浏览器没有正确地处理这个问题。如果子节点溢出，我希望身体的高度能够自动调整。然而，当你使用100%的高度和100%的宽度时，这似乎不会发生。

2016-08-12 00:58:24

请检查这个:

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

或者尝试新的方法Viewport height:

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

视窗: 如果你使用视口意味着任何大小的屏幕内容都将达到屏幕的全高。

2016-10-26 19:14:03

如果需要，你也可以使用JS

var winHeight = window.innerHeight    || 
document.documentElement.clientHeight || 
document.body.clientHeight;

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

2016-11-28 15:04:09

所有的答案都是100%正确的，并且解释得很好，但我做了一些很好的和非常简单的事情使它有响应。

这里元素将占用100%的视图高度，但当涉及到移动视图时，它看起来不太好，特别是在纵向视图(移动)上，所以当视图端口变得越来越小时，元素将会折叠并相互重叠。为了让它的响应更小，这里有代码。希望有人能从中得到帮助。

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

<div class="img_wrap">
  <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="">
</div>

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

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

这里是JSfiddle演示。

2017-12-19 06:48:11

如果你不想编辑自己的CSS文件并自己定义高度规则，最典型的CSS框架也解决了这个问题，body元素填充整个页面，以及其他问题，轻松地使用多种大小的视口。

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

2018-03-24 09:59:59

这里更新

html
  {
    height:100%;
  }

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

2018-06-04 06:56:05

我会用这个

html,身体{ 背景:#药剂; 最小高度:100%; 最小高度:100 vh; 溢出:汽车;// <-当你调整屏幕大小时，这是需要的｝ < html > 身体< > < /身体> < / html >

浏览器将使用min-height: 100vh，如果浏览器有点旧，则min-height: 100%将作为备用。

溢出:auto是必要的，如果你想要身体和html扩大他们的高度当你调整屏幕的大小(例如移动大小)

2019-04-10 13:20:16

我设计了div容器-通常是主体的唯一子元素，带有以下css

.body-container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

2020-12-23 04:12:32

适用于现代和传统浏览器的CSS高度

这里发布的大多数其他解决方案在传统浏览器中都不能很好地工作!人们发布的一些代码会在现代浏览器中导致文本溢出，超过100%的高度，这是糟糕的设计!所以请尝试我的代码解决方案。

下面的CSS代码应该支持灵活的网页高度设置在所有已知的浏览器，过去和现在:

html {
    height: 100%; /* Fallback CSS for IE 4-6 and older browsers. Note: Without this setting, body below cannot achieve 100% height. */
    height: 100vh;/* Overrides 100% height in modern HTML5 browsers and uses the viewport's height. Only works in modern HTML5 browsers */
}

body {
    height: auto; /* Allows content to grow beyond the page without overflow */
    width: auto; /* Allows content to grow beyond the page without overflow */
    min-height: 100%; /* Starts web page with 100% height. Fallback for IE 4-6 and older browsers */
    min-height: 100vh;/* Starts web page with 100% height. Uses the viewport's height. Only works in modern HTML5 browsers */
    overflow-y: scroll;/* Optional: Adds an empty scrollbar to the right margin in case content grows vertically, creating a scrollbar.  Allows for better width calculations, as the browser pre-calculates width before scrollbar appears, avoiding page content shifting.*/
    margin: 0;
    padding: 0;
    background:yellow;/* FOR TESTING: Next add a large block of text or content to your page and make sure this background color always fills the screen as your content scrolls off the page. If so, this works. You have 100% height with flexible content! */
}

上面代码的注释

在许多较老的浏览器中，如果你没有在<html>选择器上设置100%高度，body将永远不会达到100%高度!这很关键。

新的视口单位(“vh”)在主体选择器上是多余的，而不是必要的，只要你已经将html选择器的高度设置为100%或100vh。原因是主体总是从html父类派生它的值。例外的是一些过去非常老的浏览器，所以最好为body设置一些高度值。

一些使用body选择器的现代浏览器不知道如何直接继承视口高度。再次强调，始终将html选择器设置为100%高度!但是，在大多数现代浏览器中，您仍然可以在body中使用“vh”单元来绕过父html值，并直接从视口获取其属性尺寸。但同样，如果父或根html选择器有100%的高度，它是可选的，body将始终正确继承。

Notice I've set body to height:auto, not height:100%. This collapses the body element around content initially so it can grow as content grows. You do NOT want to set body height and width to 100%, or specific values as that limits content to the body's current visual dimensions, not its scrollable dimensions. Anytime you assign body height:100%, as soon as content text moves beyond the browser's height, it will overflow the container and thus any backgrounds assigned to the original viewport height, creating an ugly visual! height:auto is your best friend in CSS!

但你还是想让身体默认为100%高度，对吧?这就是最小高度:100%可以创造奇迹的地方!它不仅允许你的身体元素默认为100%的高度，但这是在最古老的浏览器!但最重要的是，它可以让你的背景100%填充，并随着内容的高度进一步延伸:自动垂直增长。

Using overflow:auto properties are not needed if you set height:auto on the body. That tells the page to let content expand height to any dimension necessary, even beyond the viewport's height, if it needs to and content grows longer than the viewport page display. It will not break out of the body dimensions. And it does allow scrolling as needed. overflow-y:scroll allows you to add an empty scrollbar to the right of the page content by default in every web browser. The scrollbar only appear inside the scroll bar area if content extends beyond 100% height of the viewport. This allows your page width, and any margins or paddings to be calculated by the browser beforehand and stop the pages from shifting as users view pages that scroll and those that do not. I use this trick often as it sets the page width perfectly for all scenarios and your web pages will never shift and load lightning fast!

我相信height:auto是大多数UA浏览器样式表的默认值。所以要明白大多数浏览器默认都是这个值。

添加min-height:100%可以让你得到你想要的body的默认高度，然后允许页面尺寸填充viewport，而不需要跳出body的内容。这只是因为html已经根据viewport派生了它的100%高度。

这里的两个关键部分不是单位，如%或vh，而是确保根元素或html被设置为视口高度的100%。其次，重要的是，body有一个min-height:100%或min-height:100vh，这样它开始填充视口高度，不管那可能是什么。除此之外不需要其他任何东西。

传统浏览器的样式高度

Notice I have added "fallback" properties for height and min-height, as many browsers pre-2010 do not support "vh" viewport units. It's fun to pretend everyone in the web world uses the latest and greatest but the reality is many legacy browsers are still around today in big corporate networks and many still use antiquated browsers that do not understand those new units. One of the things we forget is many very old browsers do not know how to fill the the viewport height correctly. Sadly, those legacy browsers simply had to have height:100% on both the html element and the body as by default they both collapsed height by default. If you did not do that, browser background colors and other weird visuals would flow up under content that did not fill the viewport. The example above should solve all that for you and still work in newer browsers.

Before modern HTML5 browsers (post-2010) we solved that by simply setting height:100% on both the html and body selectors, or just min-height:100% on the body. So either solution allows the code above to work in over 20+ years of legacy web browsers rather than a few created the past couple of years. In old Netscape 4 series or IE 4-5, using min-height:100% instead of height:100% on the body selector could still cause height to collapse in those very old browsers and cause text to overflow background colors. But that would be the one issue I could see with this solution.

使用我的CSS解决方案，您现在可以在99.99%的浏览器(过去和现在)中正确地查看您的网站，而不仅仅是过去几年构建的60%-80%的浏览器。

好运！

2021-01-21 21:54:47

在20多个答案之后，似乎没有一个人提到了我发现的最关键的因素——标记。

在尝试了这个问题和其他一些问题的基本每个答案之后，我重新构造了我的标记，如下所示:

<body>
  <div class="section1">
    <nav>
    </nav>
    ...
  </div>
  <div class="section2">
  </div>
</body>

本质上，它需要两个不同的外部容器。第一个容器用于包含导航栏，并将背景色/图像一直扩展到浏览器的高度，第二个容器用于包含“折叠以下”的所有内容——包括第二个背景色/图像。

这个解决方案允许第一个容器的背景一直扩展到底部，同时保持第二个容器的自由，以占用尽可能多的空间。

从这一点开始，唯一需要得到我和原始问题想要的结果的CSS如下:

body {
  height: 100%;
}

.section1 {
  height: 100%;
  background: black; /* for demo purposes */
}

.section2 {
  background: white; /* for demo purposes */
}

2021-09-18 21:43:32

对于真正的纯粹主义者来说，这种方法尊重浏览器的默认边距，并防止由其他方法产生的不需要的滚动，除了随着内容的增长而增长。在Chrome, Safari和Firefox中测试。背景只是做做样子……

html { 显示:flex; flex-direction:列; 高度:100%; 背景:红色; } 身体{ flex: 1; 背景:绿色; }

2022-06-25 06:15:19

使主体有100%的浏览器高度

推荐文章

最新文章

标签