javascript 弹出 div，固定但太大时可滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24679691/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Popup div, fixed but scrollable when too big
提问by user3782713
I want a div that pops up on a fixed position from the top of the viewport, wherever you are on the page. But, when this div has a lot of content, the page doesn't scroll.
我想要一个从视口顶部的固定位置弹出的 div，无论您在页面上的哪个位置。但是，当这个 div 有很多内容时，页面不会滚动。
So: first the div is out of view, when button is clicked it slides into view. And then you can scroll that div. But the whole page has to scroll, not just inside that div.
所以：首先 div 不在视图中，当单击按钮时，它会滑入视图中。然后你可以滚动那个 div。但是整个页面都必须滚动，而不仅仅是在那个 div 里面。
It works when I use 'position: absolute', but then it pops up from the top of the body instead of the viewport.
当我使用“位置：绝对”时它起作用，但它从身体的顶部而不是视口弹出。
Here's the simple CSS to start with:
这是开始的简单 CSS：
div.overlay {
width: 100%;
position: fixed;
min-height: 100%;
background: red;
margin-top: 50px;
top: 100%;
left: 0;
}
Here's my JSFiddle: http://jsfiddle.net/uPmb4/
这是我的 JSFiddle：http: //jsfiddle.net/uPmb4/
I hope you get the idea what I'm trying to arrange, but maybe my approach isn't the best way to begin with.
我希望你明白我想要安排什么，但也许我的方法不是最好的开始方式。
回答by Elise
So if there is too much content in the red box, you want both the red box and the page to scroll separately?
那么如果红框内容太多，是不是想让红框和页面都分别滚动？
How about this:
这个怎么样：
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;
}
回答by lpg
Replacing "min-height" for "height", and adding "overflow:auto" seems to work:
将“min-height”替换为“height”，并添加“overflow:auto”似乎有效：
div.overlay {
width: 100%;
position: fixed;
height: 100%;
background: red;
margin-top: 50px;
top: 100%;
left: 0;
overflow:auto;
}
回答by wiesion
min-height: 100%; and margin-top: 50px; are creating the problem. 50px of the content disappear beneath the current viewport. Place a wrapper inside the div.overlay and give that a margin-top: 50px;
最小高度：100%；和 margin-top: 50px; 正在制造问题。50px 的内容消失在当前视口下方。在 div.overlay 中放置一个包装器，并给它一个 margin-top: 50px;
回答by caspian
Set all the overlay divs to have the movedownclass and do not use top: 100% in the overlay. Then if you add overflow-y: autoyou're all set.
将所有覆盖 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;
}
Example: http://jsfiddle.net/uPmb4/10/
