css知识-为什么你写的height: 100%不起作用

按照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; }

猜你喜欢

转载自www.cnblogs.com/cofort/p/12174344.html
今日推荐