html和body元素的高度 [英] html and body elements height

查看：132
本文介绍了html和body元素的高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

  html {
 height：100％; 
} 
 
 body {
 min-height：100％; 
}

上面的代码可以和其他一些div一起使用来获得粘性页脚。另一种说法是为了在body上设置百分比高度，我们还需要设置html的明确高度。

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



这个帖子在这里说html元素的高度是由视口控制的



固定HTML元素的高度

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

  html {height：100％;}。wrapper {padding-bottom：3000px;}。footer {position：absolute;底部：0; left：0;}

< html> < HEAD> <标题>身高< /标题> < link rel =stylesheettype =text / csshref =styles.css> < /头> <身体GT; < div class =wrapper> < div class =header>标题< / div> < div class =content>内容< / div> < div class =footer>页脚< / div> < / DIV> < / body>< / html>

固定身高：




$ b 粘滞页脚由于HTML元素的高度占据了整个内容，为什么我不能通过在html上设置高度或设置min-高度？由于body是默认的 position：static ，如果我定位了任何东西，它应该被定位在HTML元素右边？



<但是没有一项工作如下：/ b / b
$ b

html {min-height ：100％;}。wrapper {padding-bottom：1000px;}。footer {position：absolute;底部：0; left：0;}

< html> < HEAD> <标题>身高< /标题> < link rel =stylesheettype =text / csshref =styles.css> < /头> <身体GT; < div class =wrapper> < div class =header>标题< / div> < div class =content>内容< / div> < div class =footer>页脚< / div> < / DIV> < / body>< / html>

b 

  html {} .wrapper {padding-bottom：3000px;}。footer {position：absolute;底部：0; left：0;}

< html> < HEAD> <标题>身高< /标题> < link rel =stylesheettype =text / csshref =styles.css> < /头> <身体GT; < div class =wrapper> < div class =header>标题< / div> < div class =content>内容< / div> < div class =footer>页脚< / div> < / DIV> < / body>< / html>


$ b


  • 总之，任何人都可以告诉我html和
    body元素的高度是如何计算的？

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



参考文献：




解决方案

您缺少的概念称为初始包含块。

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

对于大多数元素，它们的包含块是由它们的父元素形成的块，但也有例外。特别是，你的问题的两个例子，即 position：absolute 的页脚和显然没有父元素的文档的根元素例如，< html> 元素。



正如LX所解释的那样，对于绝对定位元素，由他们最近的非静态定位的祖先元素形成。如果没有这样的存在，就像你的情况一样，所使用的包含块是初始包含块。

根目录（< html> ; ）元素的包含区块也是初始包含区块。

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



现在我们可以回答您的问题问题，关于你的最后一个片段


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


html元素的内容高度 - 标题和内容元素加上包装的填充。 （脚注不计入 - 它的位置：绝对将它从流中取出，如果它是 height：100％它将是初始包含块的高度，这是视口的高度。


为什么上面的粘滞footer work？

页脚相对于初始包含块 - （0,0）加上初始包含块的高度，但它的高度不是很高，但滚动条允许视口范围在画布上，直到html元素的底部，它不锁定在（0，0），因此页脚相对于它移动 - 即它不粘该视口并不位于< html> 元素的底部。


I've been looking up on the Internet to find out how min-height and height properties work on body and html elements. I've seen the following code at a lot of places

html {
    height: 100%;
}

body {
    min-height: 100%;
}

The above can be used in conjunction with some other divs to get a sticky footer. The other statement being that to set percentage height on body we need to set an explicit height of html as well.

Well Ok, but then what is the height of html tag in percentage relative to? Some answers say it is relative to viewport if the the height of viewport is 100%. Now what is this 100% height of viewport relative to?

This post over here says that the height of html element is controlled by the viewport HTML vsBody, but that's not what I saw

Height of HTML Element can Increase

But then why is that when the content increases the the height of html element also increases as can be seen on Chrome Developer Tools

Code:

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>

Height of HTML element made fixed

Only when I explicitly set the height of html element to 100% does it get a fixed height:

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>

And here's the fixed height:

Sticky Footer

Since the height of HTML Element is taking over the whole content, why can't I achieve a sticky footer by not setting height on html or setting a min-height? Since body is be default position: static, if I position anything, it should be positioned against the html element right?

But none of the below work :/

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>

  • In summary can anyone please tell me how is the height of html and body elements calculated?
  • Why doesn't the above sticky footer work?

References:

解决方案

The concept you are missing is called the "Initial Containing Block".

The html element (by definition) and the body element (by default) are block elements, and behave the same way as all block level elements. So you can set a fixed height, let it be as tall as its content, or give it a percentage height (and/or max and min variants). When a block level element is given a percentage height, that is a percentage height of its "Containing Block". For this to work, the Containing Block's height must not depend (even potentially) on the height of its content, because that would cause a circular dependency.

For most elements, their containing block is the one formed by their parent element, but there are exceptions. In particular, are the two examples of your question, the footer which is position:absolute and the root element of the document which obviously doesn't have a parent element, in your case, the <html> element.

As explained by L-X, for absolute positioned elements, their containing block is formed by their nearest non-statically positioned ancestor element. If no such one exists, as in your case, the containing block used is the "Initial Containing Block".

The root (<html>) element's containing block is also the "Initial Containing Block".

So what is the "Initial Containing Block"? It's a block box that has the height and width of the viewport, but is anchored at the origin of the canvas (0, 0). This is different to the viewport, which has the same dimensions, but is not anchored, the scroll bars allow the viewport to move over the canvas.

Now we can answer your questions, with respect to your last snippet

how is the height of html and body elements calculated?

The html element there is the height of its contents - the header and content elements plus the wrapper's padding. (the footer isn't counted - its position:absolute takes it out of the flow. If it was height:100% it would be the height of the Initial Containing Block, which is the height of the viewport.

Why doesn't the above sticky footer work?

The footer is positioned relative to the Initial Containing Block - (0, 0) plus the height of the Initial Containing Block, less its own height. But the scrollbars allowing the viewport to range over the canvas, down to the bottom of the html element. It's not locked at (0, 0) so the footer moves relative to it - i.e. it is not sticky to the viewport, and it is not positioned at the bottom of the <html> element.

这篇关于html和body元素的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆