按照w3c中的width和height属性, 可以明确%设定宽高时根据父元素的宽高来的。
1. width: 100%
<body>
<div style="width:100%;height:100%;background-color:blueviolet;">
width:100%;height:100%; </div>
</body>
//宽100%,我们现在看到的高是属于font-size的,而不是100%;
可以看到基本上宽的100%很容易就实现的,但是这里的height却不能设置成%比的(该元素会消失看不见),这是为什么呢?
2. height: 100%
%是一个相对父元素计算得来的高度,要想使他有效,我们需要设置父元素的height;
要特别注意的一点是,在<body>之中的元素的父元素并不仅仅只是<body>,还包括了<html>。
所以我们要同时设置这两者的height,只设置其中一个是不行的:
html,body{ height: 100%; margin: 0; padding: 0; }