javascript - 隐藏/显示时 Div 太宽

Question

我有两个 div，每个 div 包含另外两个 div。一个包含 DIV 的显示设置为无。我有一个按钮可以切换包含的 DIV，因此我可以交替隐藏/显示包含的 div，从而隐藏/显示里面的两个 div。内部 DIV 设置为 49% 宽度，向左/向右浮动。我遇到的问题是第一次可见的 DIV 被隐藏，而隐藏的显示在内部的两个 div 太宽了。如果我用鼠标稍微调整浏览器的宽度，它们就是所需的大小，并且任何时候我从这里切换可见性都很好。如果我重新加载页面，则在第一次切换时它是错误的。在 IE 10 和 Chrome 中工作相同，所以不要认为是浏览器问题。

内部的两个 div 都包含生成并呈现给内部 div 的 Highcharts ，我希望它们并排放置，并且几乎 (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";

Fiddle 显示问题，请参阅下面关于如何重现我的评论 http://jsfiddle.net/rplace/UTTz4/1/

Answer 1

好的，经过几个小时的搜索，我终于找到了问题所在(我认为)。我决心找到解决方案 =)。

问题是多方面的。

1. 第一个问题是第二个图表容器的 display:none; 属性。由于某种原因，为图表及其容器计算的宽度对于隐藏的 div 是不正确的。因此，我从 HTML 中删除了该属性，而是在图表呈现函数之后立即在 JS 中使用 document.getElementById("LowChartsPEAK").style.display = "none"; 动态隐藏它。如果您这样做，您的 SVG 将已经适合您的容器，尽管最后一个有轻微的偏移。
2. 显然 HighChart 不喜欢基于百分比的父容器。当你去 your updated fiddle ，同时运行 fiddle :

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

打开控制台并检查结果(容器名称 - SVG 宽度 - 容器宽度)。当给包装器一个像素宽度时，所有容器的宽度都相等(本应如此)。现在检查带有百分比宽度的包装器:您的最后一个 SVG 将小大约 6 到 20 个像素。我找到的消除最后一个容器中的小偏移的唯一解决方案是顶部容器的某处必须具有像素宽度。

编辑: pt 和 em 也有效。只有 % 会导致问题