乐趣区

关于css:html-height-100-的解释

明天看到一个 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…

退出移动版