html and body elements height

2020-06-23 05:41发布

站内问答 / HTML/CSS
570 3 4

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 increases

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:

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:

标签： html css
举报
3条回答
做自己的国王
2楼-- · 2020-06-23 06:06

Updated

Ok your problem is why didn't the footer position itself to html tag , insted it position itself relative to viewport ? right!

Because every html element default positioning is static and when you defined your footer to be positioned absolute it couldn't find a PARENT div or html element whose position attribute was relative enter image description here

.html{
    position:relative;
}

So you have two option either make html position to be relative or wrapper div position to be relative

查看更多
0人赞 添加讨论(0) 举报
爷、活的狠高调
3楼-- · 2020-06-23 06:14

According to the CSS specification:

When a percentage value is set for a property of the root element and the percentage is defined as referring to the inherited value of some property, the resultant value is the percentage times the initial value of that property.

查看更多
0人赞 添加讨论(0) 举报
老娘就宠你
4楼-- · 2020-06-23 06:24

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)