html,body高度100%的作用

2017-12-4 12:02| 发布者: admin| 查看: 1302| 评论: 1|来自: 蚂蚁部落

如果阅读css代码比较仔细,可能会发现大量css文件顶部会有如下设置:

[CSS] 纯文本查看 复制代码
html,body{
  height:100%;
}

下面就介绍一下代码的作用是什么。

在标准模式下,也就是网页头部写DOCTYPE的时候,body不是html页面的根元素,html才是根元素,如果仅仅设置body的100%,不设置html元素的高度为100%,那么body的高度不会生效,因为以百分比设置元素的尺寸,必要以父元素的尺寸作为参考,如果父元素没有设置尺寸,自然不会生效。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
body{height:100%}
div{
  width:100px;
  height:50%;
  margin:0px auto;
  background:red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

在标准模式下,由于没有设置html的高度,所以body的高度100%就没有参考高度,于是导致div的百分比高度无效,将css代码中的第一行设置为如下即可:

[CSS] 纯文本查看 复制代码
html,body{height:100%}

鲜花

握手

雷人

路过

鸡蛋
发表评论

最新评论

引用 朋友有朋 2018-3-21 14:36
没明白什么意思!

查看全部评论(1)

返回顶部