Question

我希望在视口顶部的固定位置弹出一个div，无论你在页面上的哪个位置。但是，当这个div有很多内容时，页面不会滚动。

所以：首先div不在视图中，当点击按钮时它会滑入视图。然后你可以滚动该div。但整个页面必须滚动，而不仅仅是在div内。

当我使用＆＃39; position：absolute＆＃39;时它会起作用，但它会从正文顶部而不是视口弹出。

以下是简单的CSS：

div.overlay {
    width: 100%;
    position: fixed;
    min-height: 100%;
    background: red;
    margin-top: 50px;
    top: 100%;
    left: 0;
}

这是我的JSFiddle：http://jsfiddle.net/uPmb4/

我希望你能理解我想要安排的事情，但也许我的方法不是最好的开始方式。

Answer 1

因此，如果红色框中的内容太多，您希望红色框和页面分别滚动吗？

这个怎么样：

div.overlay {
    width: 100%;
    position: fixed;
    // I assume you want the red box to always be 50px from the top
    // no matter the viewport height?
    // This will make sure the bottom edge is at the bottom of the viewport
    // However, you shouldn't use calc if you need to support older browsers.
    height: calc(100% - 50px);
    // Make sure it scrolls if too much content
    overflow-y: auto;
    background: red;
    // No need for margin-top
    top: 50px;
    left: 0;
}

<强> Fiddle

Answer 2

更换＆＃34; min-height＆＃34; for＆＃34; height＆＃34;，并添加＆＃34; overflow：auto＆＃34;似乎有效：

div.overlay {
    width: 100%;
    position: fixed;
    height: 100%;
    background: red;
    margin-top: 50px;
    top: 100%;
    left: 0;
    overflow:auto;
}

Answer 3

最小高度：100％;和margin-top：50px;正在创造问题。 50px的内容消失在当前视口下方。在div.overlay中放置一个包装器，并给它一个margin-top：50px;

Answer 4

将所有叠加div设置为movedown类，并且不要在叠加层中使用top：100％。然后，如果您添加overflow-y: auto，那么您将全部设置。

div.overlay {
    width: 100%;
    position: fixed;
    min-height: 100%;
    background: red;
    margin-top: 50px;
    overflow-y: auto;
    bottom: 0;
    left: 0;
}

示例：http://jsfiddle.net/uPmb4/10/

弹出div，固定但可滚动时太大

4 个答案: