jQuery - Div 不适合页面内容答案

【问题标题】：jQuery - Div doesn't fit page contentjQuery - Div 不适合页面内容
【发布时间】：2015-05-28 14:57:43
【问题描述】：

我对 jQuery 有一个非常小的问题。我正在使用最新版本的 HighCharts jQuery 库 (http://www.highcharts.com/) 在我的项目中生成图表。由于我不想在同一页面中提供数十个图表，因此我将它们拆分为使用 slideUp 和 slideDown 效果打开/关闭的选项卡。一切都很好，但只是一个很小的问题。

当我加载页面时，默认选项卡被正确选择，我通常可以看到图表。当我单击另一个选项卡时，前一个选项卡向下滑动，同时选定的一个向上滑动，问题就来了。里面的图表总是占据 310px 的页面宽度，这就是为什么。

<div style="min-width: 310px; max-width: auto; height: auto; margin: 0 auto" id="container3" data-highcharts-chart="3"></div>

这是包含图表的 div，您可以看到属性 min-width: 310px 和 max-width: auto。在我看来，事实上，一旦我调整页面大小，图表就会立即“捕捉”回他占据 100% 页面宽度的位置。当我简单地打开 FireBug 时也会发生同样的情况。一旦 FireBug 打开图形“捕捉”并填充 div。

遗憾的是，我无法提供代码，因为它是一个 Smarty + Jquery + PHP + MySQL 项目，都在一个框架内，我无法隔离问题。我应该怎么做才能“刷新”或“刷新”最小宽度/最大宽度？

感谢您的宝贵时间

【问题讨论】：

标签： javascript jquery html css highcharts

【解决方案1】：

您可以尝试的一件事是仅在打开选项卡后才呈现图表：

 $(".tab-selector").slideDown( "slow", function() {
    // Animation complete. Render chart here

  });

一个 hacky 解决方案是在动画完成处理程序中调用浏览器调整大小事件，该事件的工作方式与手动调整浏览器大小相同。

 $(".tab-selector").slideDown( "slow", function() {
    // Animation complete.
    $(window).trigger('resize');
 });

对不起，如果这根本没有帮助，如果没有清晰的运行示例，很难知道问题的确切原因。

【讨论】：