html - Doctype 和 CSS 定位

标签 html css

<分区>

我对 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;
}

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

最佳答案

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

关于html - Doctype 和 CSS 定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18673361/

上一篇:html - 单个 HTML 元素中的 CSS 动画

下一篇:PHP 从现有代码中随机化文件列表数组?

相关文章:

javascript - 需要计算按钮上的复选框单击它不起作用

python - 从一个变量中生成两列?

css - 在 SCSS 中迭代列表数据类型

jquery - 如何在鼠标悬停时绘制像圆圈一样的镜头

javascript - 将元素设置为事件状态,将其他元素设置为非事件状态(动态)

html - Bootstrap 容器最大宽度不起作用

javascript - style.opacity 在 ajax 函数中不起作用

javascript - 如何为引用 SVG 背景制作动画

javascript - getOrgChart 多行标题和链接

javascript - 使用 jQuery animate with stop 固定标题滚动