Question

我一直在网上查找min-height和height属性如何对body和html元素起作用。我在很多地方看过以下代码

html {
    height: 100%;
}

body {
    min-height: 100%;
}

以上内容可以与其他一些div一起使用以获得粘性页脚。另一个声明是，要在body上设置百分比高度，我们还需要设置html的显式高度。

好吧，但那么html标签的高度相对于百分比是多少？一些答案说，如果视口的高度为100％，则它与视口相关。现在这个100％高度的视口相对于？

此处的帖子说html元素的高度由视口HTML vsBody控制，但那不是我看到的

HTML元素的高度可以增加

但是为什么当内容增加时，html元素的高度也会增加，如Chrome Developer Tools所示

代码：

html {
}

.wrapper {
    padding-bottom: 3000px;
}

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
}

<html>
    <head>
        <title>Height</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <div class="wrapper">
            <div class="header">
                Header
            </div>
            <div class="content">
                Content
            </div>
            <div class="footer">
                Footer
            </div>
        </div>
    </body>
</html>

HTML元素的高度已修复

只有当我明确地将html元素的高度设置为100％时才会获得固定的高度：

html {
  height: 100%;
}

.wrapper {
    padding-bottom: 3000px;
}

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
}

<html>
    <head>
        <title>Height</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <div class="wrapper">
            <div class="header">
                Header
            </div>
            <div class="content">
                Content
            </div>
            <div class="footer">
                Footer
            </div>
        </div>
    </body>
</html>

这是固定的高度：

粘性页脚

由于HTML元素的高度占据了整个内容，为什么我不能通过在html上设置高度或设置最小高度来实现粘性页脚？由于正文是默认的position: static，如果我定位任何东西，它应该针对html元素定位吗？

但以下都不起作用：/

html {
    min-height: 100%;
}

.wrapper {
    padding-bottom: 1000px;
}

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
}

<html>
    <head>
        <title>Height</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <div class="wrapper">
            <div class="header">
                Header
            </div>
            <div class="content">
                Content
            </div>
            <div class="footer">
                Footer
            </div>
        </div>
    </body>
</html>

html {
}

.wrapper {
    padding-bottom: 3000px;
}

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
}

<html>
    <head>
        <title>Height</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <div class="wrapper">
            <div class="header">
                Header
            </div>
            <div class="content">
                Content
            </div>
            <div class="footer">
                Footer
            </div>
        </div>
    </body>
</html>

总结一下，任何人都可以告诉我html的高度是多少身体元素计算？
为什么上面的粘性页脚不起作用？

参考文献：

Answer 1

您缺少的概念称为"Initial Containing Block"。

html元素（根据定义）和body元素（默认情况下）是块元素，其行为与所有块级元素的行为相同。因此，您可以设置固定高度，让它与其内容一样高，或者给它一个百分比高度（和/或最大和最小变体）。当块级元素被赋予百分比高度时，即它的＆＃34;包含块＆＃34;的百分比高度。为此，包含块的高度不得（甚至可能）依赖于其内容的高度，因为这会导致循环依赖。

对于大多数元素，它们的包含块是由其父元素形成的块，但也有例外。特别是，您的问题的两个示例，页脚是position:absolute和文档的根元素，显然没有父元素，在您的情况下，<html>元素

如L-X所解释的，对于绝对定位元素，它们的包含块由它们最近的非静态定位的祖先元素形成。如果不存在这样的情况，就像你的情况一样，使用的包含块是＆＃34;初始包含块＆＃34;。

根（<html>）元素包含的块也是＆＃34;初始包含块＆＃34;。

那么什么是＆＃34;初始包含块＆＃34;？它是一个具有视口高度和宽度的块框，但是固定在画布的原点（0,0）。这与具有相同尺寸但未锚定的视口不同，滚动条允许视口在画布上移动。

现在，我们可以针对您的上一个代码段回答您的问题

如何计算html和body元素的高度？

html元素有其内容的高度 - 标题和内容元素以及包装器的填充。（页脚没有被计算 - 它的position:absolute将它从流中取出。如果它是height:100%，它将是初始包含块的高度，即视口的高度。

为什么上面的粘性页脚不起作用？

页脚相对于初始包含块 - （0,0）加上初始包含块的高度，减去其自身高度。但滚动条允许视口在画布上范围内，一直到html元素的底部。它没有锁定在（0,0），因此页脚相对于它移动 - 即它对视口不粘，而且它不位于<html>元素的底部。

Answer 2

根据CSS specification：

如果为根元素的属性设置了百分比值，并且百分比被定义为引用某个属性的继承值，则结果值是该属性的初始值的百分比乘以。

Answer 3

已更新

好的，你的问题是为什么页脚没有将自己定位到html标签，它将自己定位在相对于视口的位置？右！

因为每个html元素的默认定位都是<a href="#" class="open down-arrow"></a> .down-arrow { display: inline-block; position: relative; width: 30px; height: 14px; border-top: 2px solid #e74c3c; border-bottom: 2px solid #e74c3c; } .down-arrow::before { display: block; position: absolute; top: 3px; right: 0; left: 0; height: 3px; border-top: 2px solid #e74c3c; border-bottom: 2px solid #e74c3c; content: ''; } .down-arrow::after { display: block; position: relative; top: 4px; left: 0; right: 0; width: 21px; height: 21px; margin: 0 auto; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); border-right: 2px solid #e74c3c; border-bottom: 2px solid #e74c3c; content: ''; }，并且当您将页脚定位为static时，它找不到位置属性为absolute的PARENT div或html元素

relative

所以你有两个选项要么将html位置设为相对位置，要么将包装器div位置设为相对位置

html和body元素的高度

3 个答案:

根据CSS specification：