对于这个非常简单的任务，我有以下问题。
我想创建一个带有黑色页脚的页面。页面中的所有内容都应位于宽度为 910px 的居中框内......除了页脚，这应该跨越整个浏览器窗口。页脚的内容也应居中并位于宽度为 910 像素的框中。
问题是当浏览器窗口的宽度小于 910px 时，浏览器会使页脚的某些部分神奇地消失。我不知道为什么会这样。我添加了完整的代码和一些说明问题的图像。提前致谢:)
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>prueba pie</title>
<meta content="es-mx" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="pie.css"/>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("intro", "9", "expressInstall.swf")
</script>
</head>
<body>
<div class="main">
<div class="secondary">
<p> ******************************</p>
</div>
<div id=footer>
</div>
</div>
</body>
</html>
CSS:
@import url(layout.css);
a:link {color:#9A9A9A;}
a:hover {color:#2A2A2A;}
a:active {color:#2A2A2A;}
a:visited{color:#9A9A9A;}
body{
margin: 0px;
background-color: #FCFCFC;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 0px;
font-size: small;
color: #4B4B4B;
}
#footer{
width: 100%;
height: 130px;
padding-top: 20px;
padding-bottom: 20px;
margin-top: 10px;
background: #232323;
font-size: x-small;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FCFCFC;
}
/*---------------- contenedor principal ---------------- */
.main{
background: #FCFCFC;
text-align: center;
}
/*---------------- contenedor secundario ---------------- */
.secondary{
width: 910px;
height: auto;
margin: 0px auto;
padding: 0px;
position: relative;
}
最佳答案
对于除 IE6 之外的所有内容，您都可以将 min-width: 910px 添加到 #footer 规则中。对于 IE6，我不确定
关于html - CSS:水平滚动的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6712966/