HTML-Doctype杀死css声明“height:100%;”

时间:2013-07-30 16:21:00

标签: html css doctype

我一直在为网页制作布局,即使我在一个简约的例子中运行它,但在转移到我的网站模板时拒绝工作。

首先我认为某些css规则或者会干扰,但我将其缩小到doctype:

如果我在chrome中运行以下示例,一切正常。但是只要我添加一个doctype(无论是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>

1 个答案:

答案 0 :(得分:0)

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

html {
    height: 100%;
}

由于height继承自其父元素。