15

我试图用一些绝对位于主 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>
4

11 回答 11

15

这适用于 IE6-9、FF3.6、Safari 5 和 Chrome 5。我扔给它的文档类型似乎并不重要（无，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>
于 2010-07-18T00:53:25.670 回答
5

在 body 标记上抛出一个 overflow-x: hidden 可以在任何不是 IE6/7 的情况下工作......但是对于这两个浏览器，您还需要将 overflow-x: hidden 添加到 html 标记。

因此，使用您现在拥有的进行此调整：

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

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

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

于 2010-04-16T03:53:09.497 回答
1

我遇到了与此类似的问题，并且因为我发现上面的解决方案对我不太有效，所以我的头发完全被扯掉了。我通过在我的主容器 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 的大小，因此我将其设置为 1100 像素的透明 png。这是我对问题的解决方案，希望它可以帮助其他人。

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

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

于 2011-03-17T01:51:00.767 回答
0

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

于 2010-03-01T09:58:47.073 回答
0

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

于 2010-11-10T19:02:08.523 回答
0

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

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

但是，如果我没记错的话，您只是不希望它在他们的视口只有 960 像素宽时显示。AFAIR 如果没有一些 js/jQuery，你将无法做到这一点。我的建议实际上是——特别是如果你不想弄乱 javascript——如果你希望这个内容完全可见，接受窄宽度的滚动条。作为一名设计师，这可能会让你感到厌烦，但大多数人不会注意到它，而那些注意到它的人仍然可以访问你的内容——这是一个胜利，对吧？

于 2010-03-01T10:19:06.493 回答
0

您的身体未设置为相对。

于 2010-02-18T04:56:50.847 回答
0

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

#bodyInner在 < body> 标记内的所有内容周围创建包装器 ( )。

应用此 CSS 规则：

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

太糟糕了，你不能只在 < body> 元素上应用它。

于 2010-04-16T02:30:48.240 回答
0

如果页面语言是从左到右的，那么左侧不合适的元素不会导致滚动条。

尝试这个：

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

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

您可以对 direction:rtl css 属性执行相同的操作。

如果您希望您的页面呈现独立于文本方向，那么您可以以不同的方式排列页面元素以避免这种情况。

于 2010-07-19T22:28:35.773 回答
0

将所有元素包装在一个 div 中，使该 div 位置相对并隐藏溢出。每次都能解决这个问题。:D

于 2010-06-23T21:10:13.937 回答
0

我知道的老问题，但可能会帮助别人。下面扩展了 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%"));
}
于 2010-10-26T05:15:48.297 回答