Question

我有以下问题，这个非常简单的任务。

我想创建一个黑色页脚的页面。页面中的所有内容都应该位于宽度为910px的居中框内...除了FOOTER，这应该遍及浏览器窗口。页脚的内容也应该居中并放在一个宽度为910px的盒子里。

问题是，当浏览器窗口的宽度小于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;

}

enter image description here

Answer 1

对于除IE6之外的所有内容，您可以将最小宽度：910px添加到#footer规则。对于IE6，我不确定

Answer 2

当浏览器窗口比其内容窄时，默认情况下会滚动显示所有内容。要关闭此功能，请在overflow-x:hidden或父元素上使用body。

Answer 3

尝试将“width：100％”放在main上 - 或者至少检查“main”以查看它的宽度。我打赌它只有910px宽。

更新：这在JSfiddle中运行良好，非常确定问题必须在pie.css或layout.css中！

Answer 4

将您的页脚ID放在引号中以遵守XHTML规范......

<div id=footer>应为<div id="footer">

CSS：水平滚动问题

4 个答案: