棘手的 CSS 滚动长度

Question

<div class="container1"></div>
<div class="container2"><div class="container2-inner"></div></div>

.container1 { height: 5000px; }
.container2 { height: 100%; width: 100%; position:absolute; }
.container2-inner { height: 1000px; margin: 0 auto; }

.container2-inner 的高度取决于里面的内容（.container2 是覆盖弹出窗口）。

目前浏览器垂直滚动总是 5000 像素，如果.container2-inner 超过 5000 像素或更多。当弹出窗口处于活动状态时，我希望滚动只有 1000 像素，但我仍然希望在下面保持 5000 像素高 .container1。我如何做到这一点？

Answer 1

我不知道我是否正确理解了您的问题。

您可以通过使用实现模态的内滚动。

overflow:scroll

但它不适用于所有浏览器。

我在其他 Stack Overflow Question 上找到了这个 fiddle，这可能会对您有所帮助。

<div id="wrapper">
    <div id="scroller">
     </div>
</div>​

#wrapper {
    width: 150px;
    overflow: hidden;
}

#scroller {
    width: 170px;
    height: 100px;
    overflow: auto;
}

谢谢Pumbaa80。 在这里你可以看到给#scroller 比#wrapper 多20px 你可以在没有滚动条的情况下实现滚动效果。

Answer 2

根据您的描述，我不确定我是否理解您的问题，但可能类似于...

CSS

HTML, BODY {padding:0;margin:0;}
.container1 {height:5000px;background:red;}
.container2 {height:100%;width:100%;position:absolute;top:0;left:0;background:green}
.container2-inner {height:1000px;width:400px;overflow-x:hidden;overflow-y:scroll; margin:0 auto;background:yellow}

HTML

<div class="container1"></div>
<div class="container2">
    <div class="container2-inner">
    Start Here<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    End Here
    </div>
</div>

您可以在http://dabblet.com/gist/2876726查看结果

Answer 3

听起来您希望 .container2 成为模态弹出窗口？ 尝试在 body 上设置overflow:hidden，当弹出窗口处于活动状态时，并在它关闭时将其删除。