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 是叠加弹窗)

目前，无论 .container2-inner 超过 5000px，垂直浏览器滚动始终为 5000px。当弹出窗口处于事件状态时，我希望滚动仅为 1000px，但我仍然希望在 .container1 下面保持 5000px 高。我该如何实现？

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 你可以在没有滚动条的情况下实现滚动效果。