html,body高度100%的作用

1

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

1

2

3

html,body{

height:100%;

}

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

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

代码实例:

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

<!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代码中的第一行设置为如下即可:

1

html,body{height:100%}


原文发布时间为:2017-12-4

本文作者:admin

本文来自云栖社区合作伙伴“蚂蚁部落”,了解相关信息可以关注蚂蚁部落

原文链接:html,body高度100%的作用

上一篇:通用社区登陆组件技术分享(开源)上篇:OAuth 授权登陆介绍


下一篇:关于 HeartBleed 安全漏洞的 2 张漫画