Question

我正在努力对抗一种奇怪的行为 - 任何帮助都会受到赞赏。

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

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

在“主要内容”中，所有行动都在进行中。可能发生的事情之一是用户的按钮点击，一个absolute位置的div，最初是不可见的，正在显示，其内容使用AJAX填充（即我事先不知道多少有内容。）

如果此div的整体height最终小于“主要内容”的可用高度，则此方法正常。但是，如果这个“popup”div因很多内容而结束很长时间，那么它会被截断在“Main content”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中创建弹出窗口。

这有溢出-y：隐藏，它会隐藏任何溢出。

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

Answer 2

删除overflow-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 3

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

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

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

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

Answer 4

尝试删除。{内容的position:relative;。无论如何都不需要这样做（除非你需要它，你没有说过）。这是一个很大的误解。很多人使用position: relative;几乎所有元素。这不是全部都需要的。

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

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

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

用jquery显示的div被裁剪

4 个答案: