我怎样才能让 fancyBox 2 调整它的高度以适应它的内容？答案

【问题标题】：How can I make fancyBox 2 adjust its height to fit its contents?我怎样才能让 fancyBox 2 调整它的高度以适应它的内容？
【发布时间】：2013-04-29 06:32:26
【问题描述】：

我试图让我的fancyBox 在其内容高于视口时扩展高度。这样，用户使用浏览器的滚动条滚动其内容。相反，我的 fancyBox 一直有自己的滚动条。

我只是使用内联内容，而不是 iframe。这些是我设置的选项：

$('.fancybox').fancybox({
    autoSize: 'false',
    fitToView: 'false',
    maxWidth: 940
});

添加scrolling: 'no' 会切断底部的内容。明确定义一个非常高的高度是可行的，但我希望动态确定高度。

【问题讨论】：

标签： javascript jquery fancybox-2

【解决方案1】：

布尔值和整数值应该不带引号，所以这个

$('.fancybox').fancybox({
    autoSize: 'false',
    fitToView: 'false',
    maxWidth: 940
});

应该是

$('.fancybox').fancybox({
    autoSize: false, // shouldn't be true ?
    fitToView: false,
    maxWidth: 940
});

fitToView 实际上是为您提供所需的选项，但引用的 "false" 并没有使它适合您。另一方面，我不确定您是否应该禁用 autoSize，因为否则 inline 内容将无法获得自己的高度。

【讨论】：

哇，这很明显，我一点也不知道我在做什么。非常感谢您礼貌、详细的回复！
这不起作用。花式框保持高度，但没有根据视口调整其宽度。有没有办法做到这一点？（基于视口的流体宽度，但基于内容的静态高度）？
@MattiaNocerino ：首先，您对一个您不理解和/或断章取义的答案投了反对票。 “这不起作用”和“不知道如何让它按我想要的方式工作”之间是有区别的。当然，这（在 OP 的上下文中）是有效的，否则它不会被接受。
@MattiaNocerino ：其次，关于“它没有根据视口调整其宽度”，这不是 OP 中的要求，因此您的声明（再次）脱离上下文。还有另一个答案，您可以在这里实现特定的“流体”宽度stackoverflow.com/a/17245491/1055987

【解决方案2】：

听起来有点奇怪。一个丑陋的解决方案是使用 css, overflow:hidden;

每当我使用fancybox 时，滚动条都能正常工作。确定fancybox的内容没有设置其他高度？

编辑：查看了您的示例站点。似乎在内容中设置了一些比花式框本身更大的宽度。

【讨论】：

我看到这是直接从 3 年前提出的问题中复制和粘贴的答案，尴尬地包含了不适用于我的帖子的编辑（我没有包含示例页面）。跨度>
从那里解决了我同样的问题，亲爱的朋友，我在这里写同样的东西。
最新版的fancyBox还相关吗？如果是这样，我应该将overflow: hidden应用于哪个元素/类？
当点击激活滚动条时，只需在你的jQuery代码$("body").css("overflow","hidden"); // hide body scrollbar中添加以下代码，当关闭fancybox时添加以下代码$("body").css("overflow","auto");
对不起，我不太明白你的意思。你认为你可以更新你的答案以获得完整的代码块或链接到 jsfiddle 吗？我对 jQuery 还不是很熟悉，所以这会很有帮助。

【解决方案3】：

如果有人为 iframe 寻找解决方案，请使用：

parent.jQuery.fancybox.update();

【讨论】：