HTML-Doctype 杀死 css 声明 "height: 100%;" [复制]答案

【问题标题】：HTML-Doctype kills css declaration "height: 100%;" [duplicate]HTML-Doctype 杀死 css 声明 "height: 100%;" [复制]
【发布时间】：2013-07-30 16:20:59
【问题描述】：

我一直在为网页设计一个布局，即使我在一个简约的示例中运行它，当转移到我的网站模板时它也拒绝工作。

首先我认为一些 CSS 规则会干扰，但我将其缩小到 doctype：

如果我在 chrome 中运行以下示例，一切正常。但是一旦我添加了一个文档类型（无论是 html、xhtml、严格、过渡还是松散），它就搞砸了。我的“搞砸”是指css指令“高度：100％；”对于 id 为 "container" 的 div 完全忽略。

谁能告诉我问题出在哪里？

<html>
<head>

<style>
body
{
    margin:0px;
    padding: 0px;
}

#container
{
    display: table;
    position: relative;
    border: 1px dashed black;
    height: 100%;
    width: 100%;
}

#header
{
    position:absolute;
    top: 0px;
    left: 0px;
    width: 90%;
    height: 100px;
    border: 1px solid red;
}

#main
{
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    border: 1px solid green;
}

#inner
{
    position:relative;
    margin-top: 100px;
    width: 90%;
    height: 300px;
    border: 1px solid blue;
}
</style>

</head>
<body>

<div id="container">
    <div id="header">header</div>
    <div id="main">
        <div id="inner">
            inner
        </div>
    </div>
</div>

</body>
</html>

【问题讨论】：

这里对 DOCTYPE 问题做一个简单明了的解释：stackoverflow.com/a/32215263/3597276

标签： html css doctype

【解决方案1】：

我将在 CSS 中设置以下内容：

html {
    height: 100%;
}

由于height 继承自其父元素。

【讨论】：

它需要是身高、身体和任何其他祖先元素。