Html 固定位置div的CSS溢出问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19637398/
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
CSS Overflow problems with fixed position divs
提问by mjr
So this problem has come up and been solved probably 1000 times by now (Scroll part of content in fixed position container, child div height 100% inside position: fixed div + overflow auto) but I can't seem to get my CSS to behave.
所以这个问题已经出现并且现在可能已经解决了 1000 次（滚动固定位置容器中的部分内容，子 div 高度 100% 内部位置：固定 div + 溢出自动）但我似乎无法让我的 CSS 表现.
I am trying to create a popup div that has a scroll-able interior. I have a dark grey div that should cover the entire window and centered in the window should be a greenish div. The inner div needs to have a margin and be sized to fit it's content, unless the content is too big and then it needs a scroll bar.
我正在尝试创建一个具有可滚动内部的弹出式 div。我有一个深灰色的 div，它应该覆盖整个窗口，并且在窗口的中心应该是一个绿色的 div。内部 div 需要有一个边距并调整大小以适合它的内容，除非内容太大并且需要滚动条。
I can't get the scrolling to work. I've tried specifying max width/height but those seem to get ignored.
我无法让滚动工作。我试过指定最大宽度/高度，但那些似乎被忽略了。
HTML:
HTML：
<div class='PopupPanelBG'>
<div class='PopupPanel'>
<div>
<div style='width: 1000px;'>some stuff that is really big</div>
</div>
</div>
</div
CSS:
CSS：
.PopupPanelBG {
display: table;
background: rgba(0, 0, 0, 0.7);
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1000;
overflow: hidden;
}
.PopupPanel {
display: table-cell;
vertical-align: middle;
text-align: center;
position: relative;
overflow: hidden;
}
.PopupPanel>div {
display: inline-block;
vertical-align: middle;
text-align: center;
opacity: 0.9;
background-color: #e1efbb;
border: 1px solid gray;
padding: 8px;
margin: 30px;
overflow : auto;
}
采纳答案by aross
You're fiddling too much with the display property and you haven't defined a max-width. Something like this works:
您对 display 属性摆弄太多，并且还没有定义最大宽度。像这样的工作：
.PopupPanelBG {
display: table;
background: rgba(0, 0, 0, 0.7);
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1000;
overflow: hidden;
}
.PopupPanel {
display: table-cell;
vertical-align: middle;
/*text-align: center;*/
position: relative;
}
.PopupPanel>div {
/*display: inline-block;*/
/*vertical-align: middle;*/
text-align: center;
opacity: 0.9;
background-color: #e1efbb;
border: 1px solid gray;
padding: 8px;
margin: 30px auto;
overflow : auto;
max-width: 50%;
}
回答by usernolongerregistered
So... This works (with percents).
所以......这有效（百分比）。
http://jsfiddle.net/Agony/QbmdK/34/
http://jsfiddle.net/Agony/QbmdK/34/
(Now with vertical alignment!)
（现在垂直对齐！）
The thing you want to note is that the wrapping divhas a set max-width:50%while the innerdivhas a max-width:100%. That will hold true for any amount of data.
您要注意的是，包装div有一个集合，max-width:50%而包装innerdiv有一个max-width:100%. 这适用于任何数量的数据。
