6

所以这个问题已经出现并且现在可能已经解决了 1000 次（在固定位置容器中滚动部分内容，子 div 高度 100% 内部位置：固定 div + 溢出自动）但我似乎无法让我的 CSS 表现.

我正在尝试创建一个具有可滚动内部的弹出 div。我有一个深灰色的 div 应该覆盖整个窗口，并且在窗口中居中应该是一个绿色的 div。内部 div 需要有一个边距并调整大小以适合其内容，除非内容太大而需要滚动条。

我无法让滚动工作。我试过指定最大宽度/高度，但这些似乎被忽略了。

HTML：

<div class='PopupPanelBG'>
    <div class='PopupPanel'>
        <div>
            <div style='width: 1000px;'>some stuff that is really big</div>
        </div>
    </div>
</div

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;
}

http://jsfiddle.net/QbmdK/

4

2 回答 2

4

您对 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%;
}
于 2013-10-28T14:50:34.977 回答
4

所以......这有效（百分比）。

http://jsfiddle.net/Agony/QbmdK/34/

（现在垂直对齐！）

您要注意的是，包装div有一个集合max-width:50%，而包装有innerdiv一个max-width:100%. 这适用于任何数量的数据。

于 2013-10-28T14:58:32.257 回答