Question

亲爱的互联网长老 - 我为自己制造了一个令人头疼的问题，我希望你能提供帮助： - ）

这是一个由两部分组成的问题。我有一个有三个面板的页面，想要一个水平幻灯片。 For this I have created buttons, see live demo here.

1。水平幻灯片，响应 当点击右上方按钮“两个右侧窗格”时，我希望页面只显示：两个右侧窗格仅。这在大屏幕上不是问题，但是我不能让它在稍微小一点上工作（媒体查询和进一步的响应，我想我能够弄清楚）。

类似地;点击“单一左侧窗格”时，我希望它能够拉伸第三个（最右侧）面板，并隐藏其他两个面板。

显然，我希望它能回应100％的视口。

2。 Highchart 根据左上方的按钮滑动，我无法让Highchart图表相应地动作。如果我调整整个窗口，高图将调整，但在滑动面板时我无法调整它。有关图表的演示，请在第三个面板中向下滚动（这是“自制”图表。）

我试图在下面的屏幕截图中说明问题。

（我已发布another question relating to the same page,，如果你应该如此倾向于看一看）。

我怀疑这很简单，但我不能为我的生活看到我出错的地方。任何提示都将非常感激。一切顺利。

Answer 1

仅当调整窗口大小时，Highcharts才会调整大小，如果要调整图表使用大小chart.setSize(w,h)，请参阅reference。

Answer 2

好吧，好人，我有点想出来......为了别人的可能利益;我的解决方案是将两个第一列的宽度设置为固定（或者更确切地说是最大宽度），从而使用calc来计算第三列的大小，减去两个固定宽度的div。

  width: -webkit-calc(98% - 520px);
 width: calc(98% - 520px);

对于问题的Highchart部分，非常感谢@Pawel的快速回答。我还没有完全解决这个问题，因为我们目前正在讨论是否使用Highcharts是可行的方法。如果是这样，我想我以后可能会回来提出更多问题。