Doctype和CSS定位

时间:2013-09-07 12:33:02

标签: html css

我对doctype声明有一个奇怪的问题。我希望我的页脚能够粘贴在页面底部。当我声明doctype时它不会发生。当我删除doctype时,页脚会粘到底部。

代码 -

<!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;
}

知道如何解决这个问题吗?

1 个答案:

答案 0 :(得分:0)

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