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是叠加弹出窗口）。

目前，如果.container2-inner超过5000px，则垂直浏览器滚动始终为5000px，无论是多少还是更多。当弹出窗口处于活动状态时我想滚动到只有1000px，但我仍然希望在下面保持5000px高.container1。我如何实现这一目标？

Answer 1

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

您可以使用。

实现模态的内部滚动

overflow:scroll

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

我在其他fiddle上找到了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

听起来你想要.container2成为一个模态弹出窗口？当弹出窗口处于活动状态时，尝试在主体上设置overflow:hidden，并在关闭时将其删除。

Answer 3

不确定我是根据你的描述理解你的问题，但可能是......

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

看到结果

棘手的CSS滚动长度

3 个答案: