绝对定位的 div 位于右侧，当左侧没有时，会导致滚动条

发布于 2024-08-21 18:29:58 字数 1072 浏览 7 评论 0原文

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

原文

I'm trying to "flank" a centered div with some design elements that are absolutely positioned outside the main div's width. I'm getting a scroll bar due to the element on the right, but not the element on the left (IE6/7/8, Chrome, Firefox). How can I get rid of that horizontal scrollbar?

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

哆兒滾 2024-08-28 18:29:58

这适用于 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>

This works in IE6-9, FF3.6, Safari 5, and Chrome 5. Didn't seem to matter what doctype I threw at it(none, xhtml 1 transitional, html5). Hope this helps, that was an interesting problem.

<!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>

回复收藏 0 原文

紫轩蝶泪 2024-08-28 18:29:58

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

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

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

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

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

Throwing an overflow-x: hidden on the body tag would work in anything that's not IE6/7... but for those two browsers, you'll need to also add overflow-x: hidden to the html tag.

So use what you have now with this adjustment:

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

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

Note that the reason the "*" hack is used in the html, body declaration is because IE8 is unconventional. If you don't use it, IE8 will lose vertical scrollbars as well, not just horizontal. I don't know why. But that solution should be fine.

回复收藏 0 原文

负佳期 2024-08-28 18:29:58

我遇到了与此类似的问题，并且完全撕扯了我的头发，因为我发现上面的解决方案对我来说不太有效。我通过在主容器 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的人，我不同意这种方法，主要是因为你完全剥夺了用户水平滚动的能力。如果您的网站设计为以 1024 像素分辨率查看，那么如果您取消水平滚动功能，则使用 800 像素分辨率的用户将无法看到您网站的一半。

I was having a similar issue to this and was completely tearing my hair out as I found the solution above didn't quite work for me. I overcome this by creating a div outside of my main container div and using min-width and max-width to come up with a solution.

#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;
    }

I found however that I also needed to make the square.png image the size of the div so I made it as a transparent png at 1100px. This was my solution to the problem and hopefully it might help someone else.

On a side note I also had an image on the left side in which I used absolute positioning which didn't have the same scrollbar issue as the right side. Apparently the right and left side do take on different properties from what research I did regarding this matter.

In regards to people using overflow-x:hidden I would have to disagree with this method mainly because you are taking away the users ability to horizontal scroll completely. If your website is designed to be viewed the a 1024px resolution then people who are on an 800px resolution won't be able to see half of your website if you take away the ability to horizontally scroll.

回复收藏 0 原文

我不咬妳我踢妳 2024-08-28 18:29:58

你的身体没有设置为相对的。

回复收藏 0 原文

花心好男孩 2024-08-28 18:29:58

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

回复收藏 0 原文

記柔刀 2024-08-28 18:29:58

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

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

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

回复收藏 0 原文

十二 2024-08-28 18:29:58

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

回复收藏 0 原文

红衣飘飘貌似仙 2024-08-28 18:29:58

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

试试这个：

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

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

您可以使用 Direction:rtl css 属性执行相同操作。

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

If the page language is left-to-right, then the left non-fitting elements don't cause a scrollbar.

Try this:

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

This will change the text direction of the page to Right-To-Left, and now the left div will cause a scrollbar, not the right one.

You can do the same with direction:rtl css property.

If you want your page render to be independent from text direction then you can arrange page elements differently to avoid this.

回复收藏 0 原文

提笔书几行 2024-08-28 18:29:58

我知道的老问题，但可能会帮助其他人。下面扩展了 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%"));
}

Old question I know, but may help someone else out. The below expands on James response but works in IE6/7/8/9, FF and Webkit. Yes it uses evil expressions but you can put that in a IE6 specific stylesheet.

#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%"));
}

回复收藏 0 原文

顾北清歌寒 2024-08-28 18:29:58

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

回复收藏 0 原文

长安忆 2024-08-28 18:29:58

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

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

应用此 CSS 规则：

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

太糟糕了，您不能仅将其应用到 <body> 上。元素。

I have a solution that doesn't work in IE7/IE6, but seems to be fine everywhere else.

Create wrapper (#bodyInner) around everything inside your <body> tag.

Apply this CSS rule:

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

Too bad you can't just apply this on the <body> element.

回复收藏 0 原文

~没有更多了~

关于作者

栖竹

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

绝对定位的 div 位于右侧，当左侧没有时，会导致滚动条

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（11）

关于作者

相关话题

热门标签

推荐作者

烙印

singlesman

给自己一个微笑

独孤求败

晨钟暮鼓

我是自愿种绣球花的

友情链接

绝对定位的 div 位于右侧，当左侧没有时，会导致滚动条

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（11）

关于作者

相关话题

热门标签

推荐作者

烙印

singlesman

给自己一个微笑

独孤求败

晨钟暮鼓

我是自愿种绣球花的

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。