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