CSS，位置：绝对，滚动条

发布于 2024-10-24 01:31:15 字数 1060 浏览 1 评论 0原文

假设有一个页面：

<html><body>
<div style="position: relative;">
  <div style="position: absolute; left: -30px;">LEFT</div>
  <div style="position: absolute; right: -30px;">RIGHT</div>
<div>
</body></html>

为什么水平滚动条只占RIGHT溢出？

换句话说，为什么 LEFT 不触发滚动条，而 RIGHT 却触发呢？

除了 body -> 之外还有其他方法吗？溢出：隐藏，为RIGHT不触发滚动条？

编辑：

我试图实现的是页面中间的包装器（就像任何其他“内容”窗格一样 - 基本上 div -> margins: 0 auto;如果屏幕太小，这应该会触发水平滚动条，然后，这就是问题所在，我希望另一个 div “粘在包装器之外” - 这些不应该触发滚动条

。：

<html><body>
<div id="wrapper" style="position: relative; margin: auto; 
  width: 400px; height: 200px; background-color: red;">
  <div style="position: absolute; left: -30px;">LEFT</div>
  <div style="position: absolute; right: -30px;">RIGHT</div>
<div>
</body></html>

当屏幕足够宽时，一切都很好，但是当我尝试缩小屏幕时，突然出现一个水平滚动条，它只允许滚动到右侧，而不是左侧。在包装器（并且只有包装器）大于屏幕之前滚动条不会出现？

原文

Say there is a page:

<html><body>
<div style="position: relative;">
  <div style="position: absolute; left: -30px;">LEFT</div>
  <div style="position: absolute; right: -30px;">RIGHT</div>
<div>
</body></html>

Why the horizontal scrollbar only accounts for the RIGHT overflow?

In other words, why LEFT triggers no scrollbar, while RIGHT does?

Is there a way, other than body -> overflow: hidden, for RIGHT not to trigger the scrollbar?

Edit:

What I try to achieve is a wrapper in the middle of page (like any other "content" pane out there - basically div -> margins: 0 auto;. This should trigger horizontal scrollbar if the screen is too small. Then, and this is the problem, I want another div's to "stick outside" of the wrapper - these should not trigger the scrollbar.

Edit 2:

<html><body>
<div id="wrapper" style="position: relative; margin: auto; 
  width: 400px; height: 200px; background-color: red;">
  <div style="position: absolute; left: -30px;">LEFT</div>
  <div style="position: absolute; right: -30px;">RIGHT</div>
<div>
</body></html>

When the screen is wide enough, everything's fine. But as I try to shrink the screen, all of sudden a horizontal scrollbar appears. The problem is, it only allows to scroll to see RIGHT, and not LEFT. Is the a way to for the scrollbar not to appear until the wrapper, and only the wrapper, is larger than the screen?

分享到QQ

分享到微博

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

发布评论

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

喜爱纠缠 2024-10-31 01:31:16

经过你的澄清，我明白了问题所在。

您可以通过添加一个包装元素并指定 overflow:hidden 和 min-width 来解决这个问题。

现场演示

HTML：

<div id="outerContainer">
    <div id="container">
        <div id="left">left</div>
        <div id="right">right</div>
        text
    </div>
</div>

CSS：

html, body {
    margin: 0; padding: 0; border: 0
}

#outerContainer {
    overflow: hidden;
    min-width: 300px
}
#container {
    margin: 0 auto;
    width: 300px;
    background: #ccc;
    position: relative
}

#left, #right {
    position: absolute;
    background: #666;
    width: 60px
}
#left {
    left: -60px
}
#right {
    right: -60px
}

After your clarification, I understand the problem.

You can get around it by adding a wrapper element, and giving that overflow: hidden, and a min-width.

Live Demo

HTML:

<div id="outerContainer">
    <div id="container">
        <div id="left">left</div>
        <div id="right">right</div>
        text
    </div>
</div>

CSS:

html, body {
    margin: 0; padding: 0; border: 0
}

#outerContainer {
    overflow: hidden;
    min-width: 300px
}
#container {
    margin: 0 auto;
    width: 300px;
    background: #ccc;
    position: relative
}

#left, #right {
    position: absolute;
    background: #666;
    width: 60px
}
#left {
    left: -60px
}
#right {
    right: -60px
}

回复收藏 0 原文

雨落星ぅ辰 2024-10-31 01:31:16

我遇到了同样的问题，最终使用媒体查询解决了它。就我而言，我希望有一个可拖动/可调整大小的侧边栏，部分位于屏幕外（如果窗口宽度约为 1000 像素），并且没有水平滚动条。

但如果窗口宽度小于 960 px（主容器宽度为 960），则应显示水平滚动条，以便用户可以看到全部内容。

标记：

<div class="container">
    <div class="main">
        <p>Main content</p>
    </div>
    <div class="sidebar">
        <p>
          Sidebar content
        </p>
    </div>
</div>

CSS

.container {width:960px;margin:0 auto;position:relative;}
.main {padding-right:100px}
.sidebar {width:400px;position:absolute;top:0;right:-100px}

 // The fix:
@media only screen and (min-width: 960px) {
 html {overflow-x:hidden} // no scroll if window width is > 960px
}

I had the same problem and ended up solving it using media queries. In my case, i wanted to have a draggable / resizable sidebar positioned partly offscreen (if window width around 1000px) with no horizontal scrollbar.

But if the window width is less than 960 px (the main container width is 960), the horizontal scrollbar should be present so that the user can see it all.

The markup:

<div class="container">
    <div class="main">
        <p>Main content</p>
    </div>
    <div class="sidebar">
        <p>
          Sidebar content
        </p>
    </div>
</div>

The CSS

.container {width:960px;margin:0 auto;position:relative;}
.main {padding-right:100px}
.sidebar {width:400px;position:absolute;top:0;right:-100px}

 // The fix:
@media only screen and (min-width: 960px) {
 html {overflow-x:hidden} // no scroll if window width is > 960px
}

回复收藏 0 原文

~没有更多了~