css - 棘手的 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 像素，但我仍然希望在.container1下方保持 5000 像素高。我该如何做到这一点？

Answer 1

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

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

overflow:scroll

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

我在其他可能对您有所帮助的Stack Overflow Question上找到了这个小提琴。

<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 成为模式弹出窗口？尝试overflow:hidden在弹出窗口处于活动状态时设置在主体上，并在关闭时将其移除。