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

发布于 2024-08-21 18:29:58 字数 1072 浏览 3 评论 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 评论

22 人气

关注发私信

友情链接

文江博客

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

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

发布评论

评论（11）

关于作者

相关话题

热门标签

推荐作者

lioqio

Single

禾厶谷欠

alipaysp_2zg8elfGgC

qq_N6d4X7

放低过去

友情链接

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

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

发布评论

评论（11）

关于作者

相关话题

热门标签

推荐作者

lioqio

Single

禾厶谷欠

alipaysp_2zg8elfGgC

qq_N6d4X7

放低过去

友情链接

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