0

我正在尝试与一种奇怪的行为作斗争 - 感谢您提供任何帮助。

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

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

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

如果height此 div 的整体最终小于“主要内容”的可用高度，则此方法可以正常工作。但是，如果这个“弹出”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. 链中的任何地方都没有高度或最大高度限制。那么为什么“内容”不增长以适应“弹出”呢？

4

4 回答 4

2

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

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

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

于 2012-05-29T08:30:30.547 回答
0

移除溢出 -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>
于 2012-05-29T08:33:59.547 回答
0

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

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

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

$(".content").css("min-height", "");
于 2012-05-29T09:50:57.293 回答
-1

尝试删除position:relative;.content。无论如何都不需要它（除非你需要它来做你没有说过的事情）。这是一个很大的误解。很多人使用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
});​
于 2012-05-29T09:01:01.450 回答