题外话
刚接触网页制作的时候,我遇到的第一个问题就是,height100%不起作用。带着疑惑和不解,在网上搜索一番,只解决了问题,至于为什么,是什么原理,还没有得到比较权威的解释。
正题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.a {
width: 100%;
height: 100%;
background: #000;
}
</style>
</head>
<body>
<div class="a"></div>
</body>
</html>
按我们的正常思维理解,应该整个页面都是黑色。可事实上,不起作用。然后我设置了
//有效果
width: 100%;
height: 100px;
//没有效果
width: 10px;
height: 100%;
结论是width100%可以起作用,而height100%却不可以起作用。
width100%可以起作用,甚至width:auto;(也就是设置绝对值的height,不设置width)也可以起作用。这是为什么呢?网上查了好久,没能得到一个满意的解释。
而对于height100%,不起作用。当我设置如下图所示时(就是给div的父元素,以及父元素的父元素都设置了height100%,这样子就起作用了。)
我的理解是,height100%是相对与它的父元素以及它的父元素的父元素的height。至于为什么,什么原因。占时还没得到满意的答案。在以后的学习里,慢慢去探索这个原理!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,
body {
height: 100%;
}
.a {
width: 100%;
height: 100%;
background: #000;
}
</style>
</head>
<body>
<div class="a">
</div>
</body>
</html>