css - 身高100％不起作用

Question

我有以下html标记：

<div id="all">
    <div id="back">
        <div id="header">test</div>
    </div>
</div>

以下css：

html,body{
    height: 100%;
}
#header{
    height: 100%;
    background: red;
}

demo

但百分之百的高度也不起作用！

Answer 1

要使100％高度工作，您需要确保您的父div也包含100％的高度。所以试试这个：

html,body{
    height: 100%;
}
#header{
    height: 100%;
    background: red;
}
#all,#back{
    height: 100%;
}

demo

Answer 2

您需要让#header的所有家长拥有height: 100%才能生效。

Answer 3

试试这个

html,body{
    height: 100%;
    min-height:100%;

}
#header{
    height: 100%;
    background: red;
}
#all,#back{
    height: 100%;
}

Answer 4

高度：100％表示它将占据父元素的整个高度。在你的场景中，父div的#all和#back没有定义自己的高度。所以你需要给它们高度：100％

#all,#back
{
  height:100%
}