如何在fancybox 2.1.0中设置生效的minHeight和maxHeight？

针对你在fancybox 2.1.0中遇到的minHeight和maxHeight参数失效的问题，我帮你分析下核心原因并给出可行的解决方案：

问题根源 #

你当前的代码里有两个参数会直接覆盖自定义高度限制：

• autoSize: true：在fancybox 2.x版本中，这个参数会让插件自动根据弹窗内容计算并调整尺寸，完全忽略你设置的minHeight和maxHeight。
• fitToView: true：该参数会强制弹窗不超过浏览器视口的大小，如果你的maxHeight设置值大于当前视口高度，这个参数会让maxHeight的限制失效。

解决方案 #

要让minHeight和maxHeight生效，你需要调整以下参数：

1. 必须关闭自动尺寸调整：将autoSize设置为false，这是让自定义高度参数生效的前提。
2. 根据需求调整视口适配：
   • 若希望弹窗最大高度不超过视口，同时遵守你设置的maxHeight，可保留fitToView: true（确保maxHeight值≤视口高度）；
   • 若想严格按照设置的maxHeight显示（即使超过视口，弹窗会自动出现垂直滚动条），则将fitToView设为false。

修正后的代码示例 #

$.fancybox.open({
  href: '#advancedSearchWrapper',
  maxHeight: 500,
  minHeight: 300,
  fitToView: true, // 可根据需求改为false
  autoSize: false, // 关键参数：关闭自动尺寸计算
  modal: true,
  autoScale: true // 2.x中该参数已被fitToView替代，可按需保留或移除
});

补充说明 #

• 当弹窗内容高度小于minHeight时，插件会自动将高度拉伸至minHeight；
• 当内容高度超过maxHeight时，弹窗会自动显示垂直滚动条（需确保fitToView的设置不冲突）。

内容的提问来源于stack exchange，提问作者Senle.Bao