CSS, position: absolute, scrollbars_问答_开发者

开发者 https://www.devze.com 2023-02-18 04:53 出处：网络

Say there is a page: <html><body> <div style=\"position: relative;\"> <div style=\"position: absolute; left: -30px;\">LEFT</div>

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开发者_StackOverflow中文版;">
  <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?

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
}

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
}