CSS固定定位的div元素出现溢出问题

Question

所以这个问题已经被解决了1000次（滚动固定位置容器中的部分内容，子div高度为100％，位于position：fixed div + overflow auto内），但我似乎无法使我的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/

- mjr

---

你是否在寻找类似这样的东西？其中X可以溢出，但Y不能？http://jsfiddle.net/Agony/QbmdK/23/ - usernolongerregistered

将最大宽度/高度设置为固定像素值似乎有效。为什么不能将其设置为百分比？例如，使内部div不超过屏幕的95%？ - mjr

值“％”使div的大小达到其自身的100％，而不是屏幕。屏幕是相对的，如果需要，浏览器将生成overflow-x滚动条。使div的大小为其自身的100％只会适应内部文本，而不是相反。 - usernolongerregistered

这个怎么样？（http://jsfiddle.net/peteng/QbmdK/29/）你只需要调整`.PopupPanel`的顶部和底部值，就可以将其大小调整到你想要的尺寸。 - Pete

@Pete- 看起来就是我想要的效果。谢谢。 - mjr

Answer 1

所以... 这个方案适用于百分比。

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

(现在带有垂直对齐!)

需要注意的是，包装的div设置了max-width:50%，而innerdiv设置了max-width:100%。这将适用于任何数据量。

- usernolongerregistered

---

不垂直居中，就像我的初始答案一样。 - aross

等一下...如果已经有overflow-x和white-space:nowrap，为什么还需要垂直居中呢...？ - usernolongerregistered

我在问题中没有看到任何nowrap？ - aross

我也不知道，但我在答案中看到了。无论如何，您可以将 vertical-align:middle; 添加到 #innerdiv 的 CSS 中，以使内容垂直对齐，尽管它并没有改变任何东西，因为有 nowrap。 - usernolongerregistered

不是内容，而是边界框必须垂直居中。 - aross

哦，好的，这样更有意义。嗯，那还不错。请在我的回答中检查更新后的小提琴代码。 - usernolongerregistered

Answer 2

您过于频繁地调整显示属性，且未定义最大宽度。像这样的代码可以解决问题：

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

- aross

---

那解决了滚动问题。谢谢。但是它移除了我的垂直居中。有什么想法可以让它回来吗？ - mjr

好的，从你的问题中并不清楚。你需要那个额外的 div 来让它正常工作。修正的答案，虽然不完美但接近了。 - aross

你的回答中要点是我使用的inline-block属性导致了滚动条失效。感谢指出display属性是问题的根源。 - mjr