Question

我有两个div，每个div包含两个其他div。包含DIV显示的显示设置为无。我有一个按钮切换包含DIV，所以我可以交替隐藏/显示包含div，从而内部的两个div。内部DIV设置为49％宽度，左/右浮动。我遇到的问题是第一次隐藏可见的DIV，隐藏的一个显示内部的两个div太宽了。如果我用我的鼠标调整浏览器的宽度，只需要一点点，它们就是所需的大小，每当我从这里切换可见性时，一切都很好。如果我重新加载页面，则在第一个切换时出错。在IE 10和Chrome中使用相同的功能，因此不要认为是浏览器问题。

内部的两个div都包含生成并呈现给内部div的高图表，我希望它们并排，几乎（99％）我的页面宽度。

这里有我要隐藏的DIV，并显示包含带有highcharts的内部DIV

    <div id="highChartsNG" style="width:99%;display:none;">
        <div id="FillRateHigh" style="border:2px solid black;width:49%;float:left;"></div>
        <div id="WaitTimeHigh"style="border:2px solid black;width:49%;float:right;"></div>               
    </div>                            
     <div id="LowChartsPEAK" style="width:99%">  
        <div id="FillRateLow" style="border:2px solid black;width:49%;float:left;"></div>
        <div id="WaitTimeLow"style="border:2px solid black;width:49%;float:right;" ></div>             
     </div>

这是我在一个按钮上调用的javascript函数的片段点击在两个包含DIV的显示上打开/关闭

document.getElementById("highChartsNG").style.display = "none";
document.getElementById("LowChartsPEAK").style.display = "block";

小提示显示问题，请参阅下面关于如何重现http://jsfiddle.net/rplace/UTTz4/1/

的评论

Answer 1

好的，经过几个小时的搜索，我终于找到了问题（我想）。我决心找到解决办法=）。

问题是多方面的。

第一个问题是第二个图表容器上的display:none;属性。由于某种原因，为图表及其容器计算的宽度对于隐藏的div是不正确的。所以我从HTML中删除了该属性，然后在图表渲染功能之后立即用JS中的document.getElementById("LowChartsPEAK").style.display = "none";动态隐藏它。如果你这样做，你的SVG已经适合你的容器了，虽然最后一个容器有轻微的转变。
显然，HighChart不喜欢基于百分比的父容器。当你去your updated fiddle时，用两个小提琴：

 <div id="wrapper" style="width: 800px;">
 <div id="wrapper" style="width: 100%;">

打开控制台并检查结果（容器名称 - SVG宽度 - 容器宽度）。当包装器给出像素宽度时，所有容器宽度都相等（应该是这样）。现在检查宽度为百分比的包装器：您的最后一个SVG将小约6到20个像素。我发现用于消除最后一个容器中的小移位的唯一解决方案是顶部容器必须具有像素宽度。

编辑： pt和em也有效。它只会导致问题％

Answer 2

如果您隐藏DIV，您应该知道浏览器不会使用display：none来计算基于％的宽度。然后，如果浏览器获胜; t计算DIV，那么Highcharts也无法做到;）

检查此FAQ - 显示图表更新后的尺寸或致电reflow()。

隐藏/显示时分区太宽

2 个答案: