CSS及HTML 常见误区和注意事项(一)
为什么要设置HTML和body的高度
开始思考这个问题的起因:
有一次写练习,当我想设置一个div元素的垂直居中布局时,设置为以下CSS代码:
position:absolute;
left:50%;
top:50%;
margin-top:此处为元素高度的一半,是个负值;
margin-letf:此处为元素宽度的一半,是个负值;
并且这个div元素的父元素为body,当我设置body元素为:
height:100%;
这个时候问题出现了,div块并没有如期的出现垂直居中的效果,我一开始以为是垂直居中的问题,后继改了好几种方案,但是仍然不起作用。
当我打开firefox的查看器时,发现body元素的height只有另一个div元素的height那么大,所以并不是垂直居中出了问题,而是我的body元素高度就没有达到浏览器窗口高度的100%,所以垂直居中并没有达到理想中的效果。
解决方案
所以只要解决body的高度问题就行了。
查了下发现有以下解决途径:
在怪异模式下,也就是网页头部不写DOCTYPE的时候,body可以作为html元素的根元素,设置它的高度为百分之百的时候(不考虑外边距),可以使的页面的高度和浏览器客户区相同。在标准模式下,也就是网页头部写DOCTYPE的时候,body不是html页面的根元素,html才是根元素,如果仅仅设置body的100%,不设置html元素的高度为100%,那么body的高度不会生效,之所以不生效,是因为如果要以百分比设置元素的尺寸,必要以父元素的尺寸作为参考,如果父元素没有设置尺寸,自然不会生效。
在标准模式下,由于没有设置html的高度,所以body的高度100%就没有参考高度,于是也就导致div的百分比高度无效,如果将css代码中的第一行设置为:
- div的100%是从其上一级div的宽高继承来的,有一点很关键,就是要设置div100%显示,必须设置其上一级div的宽度或高度,否则无效。
前面总得有个容器说明他的高度是多少。这样的话div才能按比例100%继承上一级的高度可惜的是浏览器一般默认解释为内容的高度,而不是100%。
解决方法:只要为html和body设置高度为100%就可以了,html,body{height:100%;},这样之后div会按比例来继承上一级的高度了.仅仅设置的DIV元素的height属性貌似没有什么效果。
另外,html{height:100%}的高度是相对浏览器高度来说的
参考链接:
https://zhidao.baidu.com/question/748914187067687252.html