明天看到一个CSS款式:html{height:100%},感觉挺奇怪,为什么html还须要设置height:100%呢,html不就是整个窗口吗?我是这样认为的。而后就把html去掉只剩下body的height:100%,就呈现了上面的场景:
登录界面上移不见了大部分!!!
解释:我晓得一个事实:一个div块级元素没有被动为其设置宽度和高度,浏览器会为其调配可应用的最大宽度(比方全屏宽度),然而不负责调配高度,块级元素的高度是由子元素堆砌撑起来的。那么,html和body标签的高度也都是由子级元素堆砌撑起来的。

还有,元素高度百分比须要向上遍历父标签要找到一个定值高度能力起作用,如果中途有个height为auto或是没有设置height属性,则高度百分比不起作用,此时的状况是父元素高度依赖子元素堆砌撑高,而子元素依赖父元素的定高起作用,相互依赖,却都无奈依赖,死循环了。

那如何解决这个问题呢,能够让子元素先定高,这样是能够解决;然而如果子元素肯定要依赖父元素高度呢?

下面的html代码能够看出,div的父元素是body,body的父元素是html,通过height:100%层层向上,找到顶级获取定高。

所以呈现了html和body同时设置height:100%,那html的下级是谁呢?

通过下面的事实晓得,浏览器负责调配块级元素宽度,那么浏览器也肯定能够调配高度(只是没有做),那么浏览器自身是有宽度和高度的,设置html的height:100%,就能够获取浏览器的定高了,前面的body和div也就有了依赖。
转自:https://www.cnblogs.com/huash...