Question

我有一个HTML页面，其中包含使用Highcharts填充图表的以下div。默认情况下，其中一个是隐藏的，然后根据页面上的选择显示。

当我以编程方式显示div时，它只占屏幕宽度的一小部分，但是当我默认显示时，即没有CSS隐藏，那么它需要全屏宽度（这就是我想要的）。

有人可以告诉我如何设置div以保持全屏宽度或如何在显示后重置它？

我的divs：

<div id="containerR" style="height:600px; margin:0 auto; min-width:300px;"></div>
<div id="containerC" style="height:600px; margin:0 auto; min-width:300px; display:none"></div>

我的JS功能：

$('#viewC').on('click', function() {
    $('#viewR').removeClass('btn-primary');
    $('#viewC').addClass('btn-primary');
    $('#containerR').hide();
    $('#containerC').show();
});

蒂姆，非常感谢你提供任何帮助。

Answer 1

问题是highChart可能根据可用空间绘制，但如果隐藏它会弄乱它的计算。即使您稍后显示并设置宽度，图表也已使用其他尺寸绘制。

绘制图表时需要取消隐藏，之后可以再次隐藏

CSS / Javascript：隐藏的div在显示后不占用全宽

1 个答案: