本文介绍了为什么底部定位页脚在< html>如果< html> height总是等于视口的高度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述 29岁程序员,3月因学历无情被辞! 本文说明了< html>元素由浏览器计算,总是等于视口的高度,请参阅图片以便快速参考。 因此,在此粘性页脚示例中,页脚绝对位于底部; html>元素,如果内容超过视口高度的100%,则向下移动。如果它向下移动,我假设< html>元素大于100%的视口,这与开头提到的文章相矛盾。根据 c> c> 元素由浏览器计算,总是等于视口的高度 现在你可以问如果 c>视口的高度 c> c> em>超过计算的高度,它会溢出< html> 元素。因此,绝对定位元素不会再放置在页面底部。真正。这是因为使用 min-height:在< html> 而不是 height 属性上的100% 从 MDN : < html> 高于视口 的父,以便引用框的包含块。这是一个 李儿童 !事实上,块级元素与其包含块的宽度有关 在演示中,红色框显示边框框< html> 元素和蓝色框属于< body> 。 p> 假设< html> 的视口。 which is the initial containing block:.However its computed height is relative to its contents by default, unless you give it an explicit height. Hence the following statement is NOT true:Now you may ask "If the <html> doesn't take the height of the viewport, why does giving a background-color to the <html> changes the background color of the viewport?"This is because the viewport takes the background color of the root element, the <html>. This is documented in the spec:In addition, if the background color of the <html> is not specified, it'll take the background color of the <body> (if there's any) and it'll pass it to the viewport. This is has been described in the spec. Also you might want to have a look at this topic on SO:Applying a background to <html> and/or <body>But again you may wonder "why an absolutely positioned element is positioned with the respect to the viewport rather than the <html> element"The answer will be because absolutely positioned elements are positioned relative to their containing block. fixed positioned elements respect to the initial containing block which takes the dimensions of the viewport. And absolute positioned elements respect to their containing block which is established by the nearest ancestor with a position of anything other than static.The key point is: Therefore an absolute positioned element - having bottom: 0 declaration - inside <html> won't be placed with the respect to the <html> itself, but to the initial containing block, i.e. the viewport; Example Here.In order to position it relative to the <html>, we have to establish a containing block for it by giving the <html> a position of relative; Example HereThat being said, if you give the <html> a height of 100%, it will take 100% of height of the viewport, but if its contents get that bigger that exceeds the computed height, it'll overflow the <html> element. Thus, the absolute positioned element won't be placed at the bottom of the page anymore.Your thought is true. This is because of using min-height: 100% declaration on the <html> rather than height property.From the MDN:It lets the <html> get higher than the viewport (by its contents). Folks sometimes use the term of "parent" in order to refer to the box's containing block. That's a Lie-to-children! In fact block-level elements respect to the width of their containing block in which they are sit. In the demo, the red box shows the border-box of the <html> element and the blue box belongs to the <body>. Assuming the <html> doesn't take the entire height of the viewport by default. This is exactly what has been done in the Twitter Bootstrap's sticky footer example. 这篇关于为什么底部定位页脚在< html>如果< html> height总是等于视口的高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!