0

I have a strange issue with doctype declaration. I want my footer to be sticking to the bottom of the page. Its not happening when i declare the doctype. When i remove the doctype, footer sticks to the bottom.

Code - 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="styles.css"/>
</head>   
<body>  
<div id="wrapper">
    <div id="header">

    </div>
    <div id="content">

    </div>
    <div id="footer">

    </div>

</div>  
</body>
</html>

CSS - 

#wrapper{
border: 1px solid black;
position: relative;
min-height:100%;
}

#header{
height: 100px; 
background: green;              
}

#content{
height: 100px; 
background: red; 
width: 400px;
margin:0 auto;      
}

#footer{
height: 50px; 
background: blue;
position: absolute; 
bottom: 0;
left:0;
right:0;
}

Any idea how to fix this?

4

1 回答 1

0

XHTML 过渡 DOCTYPE 不会在 Web 浏览器中触发quirks 模式，但是您忘记添加 XHTML 命名空间，即http://www.w3.org/1999/xhtml. 通过这样做，浏览器会解释您的文档，就好像它是用旧标记编写的一样。非验证用户代理中的命名空间是识别元素并为其分配默认样式的唯一方法。如果您创建一个 XML 文档并将 XHTML 名称空间与 XHTML 元素与自定义元素混合使用，您将看到只有属于给定 XHTML 名称空间的元素才能从默认浏览器的样式表中获取其默认样式。

于 2013-09-07T17:37:05.260 回答