Question

我正试图“侧翼”一个居中的div，其中一些设计元素绝对位于主div的宽度之外。由于右边的元素，我得到一个滚动条，但左边没有元素（IE6 / 7/8，Chrome，Firefox）。如何摆脱水平滚动条？

<html>
<head>
<style type="text/css">
    html, body { 
        height: 100%; 
        width: 100%;
        margin: 0;
    }

    body { text-align: center; }

    .wrapper {
        margin: 0 auto;
        position: relative;
        width: 960px;
        z-index: 0;
    }

    .main {
        background: #900;
        height: 700px;
    }

    .right, .left {
        position: absolute;
        height: 100px;
        width: 100px;
    }

    .right { 
        background: #090;
        top: 0px;
        left: 960px;
        z-index: 1;
    }

    .left {
        background: #009;
        top: 0px;
        left: -100px;
        z-index: 1;
    }           
</style>
</head>
<body>
    <div class="wrapper">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

Answer 1

这适用于IE6-9，FF3.6，Safari 5和Chrome 5.似乎并不重要我扔了什么doctype（无，xhtml 1过渡，html5）。希望这有帮助，这是一个有趣的问题。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,
body { 
    margin: 0;
    padding: 0;
    text-align: center;
}

body {
    overflow: auto;
}
#container {
    min-width: 960px;
    zoom: 1; /*For ie6*/
    position: relative; /*For ie6/7*/
    overflow: hidden;
    margin: 0 auto;
}

#main {
    background: #cea;
    width: 960px;
    margin: 0 auto;
    height: 700px;
    position: relative;
    top: 0;
}

#right,
#left {
    position: absolute;
    height: 100px;
    width: 100px;
    top: 0;
    z-index: 100;
}

#right { 
    background: #797;
    right: -100px;
}

#left {
    background: #590;
    left: -100px;
}      
</style>
</head>
<body>
    <div id="container">
        <div id="main">
            <div id="left">left</div>
            <div id="right">right</div>
        </div>
    </div>
</body>
</html>

Answer 2

抛出body-x：隐藏在body标签上的任何东西都不适用于IE6 / 7 ......但是对于这两个浏览器，你还需要在html标签中添加overflow-x：hidden。 / p>

因此，请使用您现在所做的调整：

html, body { 
        height: 100%; 
        width: 100%;
        margin: 0;
        *overflow-x: hidden;
    }

body { text-align: center; overflow-x: hidden; }

请注意，在html，body声明中使用“*”hack的原因是因为IE8是非常规的。如果你不使用它，IE8也会失去垂直滚动条，而不仅仅是水平滚动条。我不知道为什么。但是那个解决方案应该没问题。

Answer 3

我遇到了类似的问题并完全撕裂了我的头发，因为我发现上面的解决方案对我来说并不适用。我通过在主容器div之外创建一个div并使用min-width和max-width来解决这个问题。

#boxescontainer {
    position: relative;
    max-width: 1100px;
    min-width: 980px;
}   

    #boxes {    
        max-width: 1100px;
        min-width: 900px;
        height: 142px;
        background:url(../grfx/square.png) no-repeat;
        background-position: center;
        z-index: 100;
    }

然而我发现我还需要将square.png图像设为div的大小，所以我将其设为1100px的透明png。这是我解决问题的方法，希望它可以帮助其他人。

另一方面，我在左侧也有一个图像，我使用的绝对定位与右侧没有相同的滚动条问题。显然，右侧和左侧确实采取了与我对此事所做的研究不同的属性。

对于使用overflow-x：hidden的人，我不得不不同意这种方法，主要是因为你正在剥夺用户完全水平滚动的能力。如果您的网站设计为1024px分辨率，那么800px分辨率的用户如果取消水平滚动功能，将无法看到您网站的一半。

Answer 4

你的身体不是亲戚。

Answer 5

不知道你想做什么，我可能会在身体上设置一个背景图片。

Answer 6

只有当视口比主要加上右侧框更薄时，才会获得滚动条，对吧？（不要认为某些人很清楚。）这是内容溢出的预期浏览器行为。

根据你想要发生的事情（为什么你希望它在这种情况下消失，如果你这样做？），你可以设置overflow：hidden on .wrapper。这总是会隐藏它 - 如果你想在其他事件上动态显示它，那就行了。

如果我没有弄错的话，你只是不希望它的视口只有960px宽。如果没有一些js / jQuery，你不能这样做。我的建议实际上是 - 特别是如果你不想搞乱javascript - 如果你想要这个内容可见，请接受窄宽度的滚动条。它可能会让你觉得自己是一名设计师，但大多数人都不会注意到它，那些做过的人仍然可以访问你的内容 - 这是一场胜利，对吗？

Answer 7

我有一个在IE7 / IE6中不起作用的解决方案，但在其他地方似乎都很好。

围绕＆lt; #bodyInner＆gt;内的所有内容创建包装器（body）标签

应用此CSS规则：

#bodyInner {
    width:100%;
    overflow:hidden;
    min-width:960px;
    }

太糟糕了，您无法在＆lt; body＆gt;上应用此功能。元件。

Answer 8

包裹div中的所有元素，使div位置相对并溢出隐藏。它每次都解决了这个问题。：d

Answer 9

如果页面语言是从左到右，则左侧非拟合元素不会导致滚动条。

试试这个：

<html dir="rtl">...</html>

这会将页面的文本方向更改为从右到左，现在左边的div将导致滚动条而不是右边的滚动条。

您可以使用方向：rtl css property。

如果您希望页面渲染与文本方向无关，那么您可以以不同方式排列页面元素以避免这种情况。

Answer 10

老问题我知道，但可能会帮助其他人。以下内容扩展了James的反应，但适用于IE6 / 7/8/9，FF和Webkit。是的，它使用邪恶的表达式，但你可以把它放在IE6特定的样式表中。

#bodyInner {
       width: 100%;
       min-width: 960px;
       overflow: hidden;       
       width:expression(((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) > 980 ? "100%" : (((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) #LT# 980 ? "960px" : "97.5%"));
}

Answer 11

我也需要这样的解决方案 - 感谢所有建议使用overlow-x隐藏的100％全包装的人。但是，我认为你不必添加额外的#bodyInner div - 我已经成功测试了它将宽度和溢出属性直接应用于Safari，Opera，Firefox，Chrome和IE8中的body。

当左边没有时，在右边绝对定位div导致滚动条

11 个答案: