Twitter bootstrap＆Highchart：水平滚动，响应

Question

Dear Elders of The Internet - I have created a headache for myself, and I hope you can help :-)

This is a two-part questions. I have a page with three panels, and want a horisontal slide. For this I have created buttons, see live demo here.

1. Horizontal slide, responsive When clicking top right button "two right panes" I want the page to show just that: the two right panes only . This is not a problem on large screens, but I cannot get it to work on slightly smaller (media queries and further responsiveness, I think I will be able to figure out).

Similarly; when clicking "single left pane" I would like it to stretch the third (far right) panel, and hide the two others.

Clearly, I want it to respond to a 100% viewport.

2. Highchart I cannot get the Highchart chart to act accordingly depending on the top left buttons sliding. The highchart will adjust if I resize the whole window , but I cannot get it to adjust when sliding panels. For a demo of a chart that works, scroll down in third panel (this is "homemade" graphs).

I have attempted to illustrate the problem in the screenshots below.

(I have posted another question relating to the same page, if you should be so inclined to take a look).

I suspect it is pretty simple, but I cannot for the life of me see where I went wrong. Any hints would be much appreciated. All the best.

Answer 1

Highcharts仅在调整窗口大小时调整大小，如果要调整图表大小，请使用chart.setSize(w,h) ，参见参考 。

Answer 2

Well, good people, I kinda figured it out myself... for the possible benefit of others; my solution was to set the width of the two first columns fixed (or rather; max-width), and thereby using calc to calculate the size of the third columns with minus the two fixed width divs.

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

For the Highchart part of the question, much thanks to @Pawel for prompt answer. I haven´t entirely worked it out, as we are currently discussing whether using Highcharts or not is the way to go. If so, I guess I might be back with more questions later.