height:100%不起作用的解决办法

题外话

刚接触网页制作的时候,我遇到的第一个问题就是,height100%不起作用。带着疑惑和不解,在网上搜索一番,只解决了问题,至于为什么,是什么原理,还没有得到比较权威的解释。

正题


<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。至于为什么,什么原因。占时还没得到满意的答案。在以后的学习里,慢慢去探索这个原理!!!


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        html,
        body {
            height: 100%;
        }
        .a {
            width: 100%;
            height: 100%;
            background: #000;
        }
    style>
head>
<body>
    <div class="a">
    div>
body>
html>

你可能感兴趣的:(css)