用 jquery 显示的 div 被裁剪

Question

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

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

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

在“主要内容”中，所有的动作都在发生。可能发生的一件事是在用户单击按钮时，一个初始不可见的具有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。

Answer 2

您可以通过删除绝对定位并使用不同的技术（即浮动）来定位弹出窗口来解决此问题。让我猜猜，position: absolute 也是必需的吗？ :) 如果是这样，那么仍有希望：您可以在内容加载后使用 JavaScript 调整内容 div 的大小。

$(".content").css("min-height", $("#popupedit").height()+"px");

当然，这必须在弹出窗口完全加载后运行，并且您可能应该在弹出窗口消失后撤消调整大小：

$(".content").css("min-height", "");

Answer 3

移除溢出 -y: hidden;它应该可以工作。另外我建议给 popupedit 固定高度

编辑：好的，试试这个技巧

JS：

var hh = document.getElementById('popupedit').offsetHeight;
document.getElementById('fix').style.height = hh + "px";

CSS：

.content {
    width: 770px;
    position: relative;
    overflow-x: visible;
    overflow-y: hidden;
    height: auto
}
#popupedit {
    background-color: #f1f0ec;
    width: 770px;
    z-index: 100001;
    position: absolute;
    left: 0px;
    top: 0px;
}

#fix { width: 770px; }

HTML：

<div class = "content">
    <div id = "popupedit">
        <p>Something important</p>                
    </div>
    <div id = "fix"></div>
</div> 

Answer 4

尝试删除 .content 的 position:relative;。无论如何都不需要它（除非你需要它来做你没有说过的事情）。这是一个很大的误解。很多人使用position: relative; 表示几乎所有元素。这根本不需要。

在这种情况下，它甚至会造成麻烦，因为#popupedit 现在将自己绝对定位到其父级而不是窗口。我的建议是，删除position: relative;，给弹出窗口一个静态的width 并用jQuery 计算它的水平位置以使其居中。也去掉top: 0;和left: 0;

然后你将这个 sn-p 的代码添加到你调用的代码中以弹出它，或者在一个单独的文件中（并不重要）：

$("#popupedit ").css({
    left: ($(window).width() - $('.className').outerWidth())/2,
    top: ($(window).height() - $('.className').outerHeight())/2
});​