jquery - 用 jquery 显示的 div 被裁剪

Question

我正在努力与一种奇怪的行为作斗争 - 感谢任何帮助。

我有一个长而复杂的 HTML 页面，其一般结构如下:

+------------------------------------------+
| Page header                              |
+-----------------------------+------------+
|                             |  Right     |
| Main content                |  Column    |
|                             |            |
+-----------------------------+------------+

在“主要内容”中，所有的 Action 都在发生。可能发生的事情之一是在用户单击按钮时，显示一个具有 absolute 位置的 div，它最初是不可见的，并且它的内容是使用 AJAX 填充的(即我不知道在提前有多少内容)。

如果此 div 的整体 height 最终小于“主要内容”的可用高度，则此方法可以正常工作。但是，如果这个“弹出式”div 由于内容过多而变得很长，那么它会在“主要内容”div 的底部被截断。由于下面什么都没有，我什至无法向下滚动以查看弹出窗口的所有内容。我希望“主要内容”增长以适应弹出窗口的整个高度，并且页面可以一直滚动到弹出窗口的底部，但这并没有发生。

这是我的“主要内容”的 CSS:

.content {
    width: 770px;
    position: relative;
    overflow-x: visible;
    overflow-y: hidden;
}

这是弹出窗口的 CSS:

#popupedit {
    background-color: #f1f0ec;
    width: 770px;
    z-index: 100001;
    position: absolute;
    left: 0px;
    top: 0px;
    display: none;
}

在 HTML 中，popupedit 是 content 的直接子元素。链中的任何地方都没有高度或最大高度限制。那么为什么“内容”没有增长以适应“弹出窗口”呢？

Answer 1

看起来您正在 .content div 中创建弹出窗口。

这有 overflow-y: hidden 会隐藏任何溢出。

尝试将弹出窗口移出内容 div。