CSS：水平滚动问题答案

【问题标题】：CSS: problem with horizontal scrollingCSS：水平滚动问题
【发布时间】：2011-07-16 06:42:14
【问题描述】：

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

我想创建一个带有黑色页脚的页面。页面中的所有内容都应位于宽度为 910 像素的居中框内……除了页脚，它应该覆盖整个浏览器窗口。页脚的内容也应该居中并在一个 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;

}

【问题讨论】：

我正在使用谷歌浏览器。我也在 IE8 中测试

标签： html css scroll

【解决方案1】：

对于除 IE6 之外的所有内容，您都可以在 #footer 规则中添加 min-width: 910px。对于IE6我不确定

【讨论】：

太棒了！谢谢！我很高兴！你成就了我的一天：D 我已经为此苦苦挣扎了好几天。
顺便问一下，你知道firefox或opera有什么兼容性问题吗？
对于 IE6，您需要一个解决方法。（它将width 视为min-width。人们通常会使用下划线hack 来制定额外的规则，例如_width:910px，或者将规则粘贴在条件注释中。）

【解决方案2】：

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

【讨论】：

overflow-x:hidden 几乎成功了！但问题实际上是空白而不是溢出。我将尝试使用overflow-x:hidden 和min-with: 910px 的解决方案

【解决方案3】：

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

<div id=footer> 应该是<div id="footer">

【讨论】：

不是一个答案，真的，即使是一个好点。作为评论更好。

【解决方案4】：

尝试将“width:100%”放在 main 上——或者至少检查“main”以查看它的宽度。我敢打赌它只有 910 像素宽。

更新：这在 JSfiddle 中运行良好，很确定问题一定出在 pie.css 或 layout.css 中！

【讨论】：

我尝试在 main 上添加“width:100%”，但没有任何反应。并且 main 总是和浏览器窗口一样宽