HTML-Doctype殺死css聲明「height：100％;」

我一直在爲一個網頁的佈局工作，即使我運行在一個簡約的例子中，它拒絕工作時轉移到我的網站模板。HTML-Doctype殺死css聲明「height：100％;」

首先我認爲一些CSS規則，否則會干擾，但我把範圍縮小到文檔類型：

，如果我在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>

來源

2013-07-30 xenonite

下面是DOCTYPE問題的一個簡單和明確的解釋： http://stackoverflow.com/a/32215263/3597276 –

我會設置在CSS如下：

html { 
    height: 100%; 
}

由於height從它的父元素繼承。

來源

2013-07-30 16:26:04 jstwrt

它需要是身高，身體和任何其他祖先元素。 – BFWebAdmin

HTML-Doctype殺死css聲明「height：100％;」

回答

相關問題