HTML-Doctype杀死CSS声明“高度：100％;”， [英] HTML-Doctype kills css declaration "height: 100%;"
问题描述
我一直在设计网页的布局，即使我以一个简约的示例运行它，也无法在将其转移到我的网站模板时正常工作。
I've been working on a layout for a web page and even though I got it running in a minimalistic example it refuses to work when transferred to my sites template.
首先，我认为某些CSS规则会干扰其他规则，但我将其范围缩小为doctype：
First I thought that some CSS rules or else would interfere, but I narrowed it down to the doctype:
如果我在chrome中运行以下示例，则一切正常。但是，一旦我添加了一个doctype（无论是html，xhtml，严格，过渡还是松散），它就搞砸了。和我的混乱我的意思是css指令 height：100％;；
If I run the following example in chrome, everything works fine. But as soon as I add a doctype (no matter if html, xhtml, strict, transitional or loose), its messed up. and my "messed up" i mean the the css directive "height: 100%;" is completely ignored for the div with the id "container".
有人可以给我提示问题出在哪里吗？
Can someone give me a hint where the problem is?
<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>
推荐答案
我将在CSS中设置以下内容：
I'd be setting the following in CSS:
html {
height: 100%;
}
由于高度继承来自其父元素。
As height inherits from its parent element.
这篇关于HTML-Doctype杀死CSS声明“高度：100％;”，的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
