图表不适合 <div> (highcharts, MVC) Bug？

Question

我的页面将被分成四个相等的部分，每个部分都应该包含一个图表。我想根据父 <div> + 填充的大小来缩放图表。 为了创建图表，我使用 dotnet highcharts 库，但我不知道如何将图表放入 <div>。到目前为止，这是我的代码：

cshtml分为四个矩形：

@{
    ViewBag.Title = "Home Page";
}
@model ChartsModel

<div id="main">
    <div id="nw" class="rectangles">
        @Model.Charts[0]
    </div>
    <div id="ne" class="rectangles">
        @Model.Charts[1]
    </div>
    <div id="sw" class="rectangles">
        @Model.Charts[2]
    </div>
    <div id="se" class="rectangles">
        @Model.Charts[3]
    </div>
</div>

css:

html, body { height: 100vh; width: 100%; padding: 0; margin: 0; background: #DDD;}
.rectangles { width: 50%; height: 40vh; float: left; box-sizing: border-box; padding: 10px;}
#nw { background: #DDD; border: 1px solid red; }
#ne { background: #DDD; border: 1px solid red; }
#sw { background: #DDD; border: 1px solid red; }
#se { background: #DDD; border: 1px solid red; }
#main { margin: 0 10vh 10%; }
#line { height: 40px ; background: red; }

我的模特：

public class ChartsModel
{
    public List<Highcharts> Charts { get; set; }
}

这是我从 highcharts 示例中插入四个随机图表时得到的结果。宽度正确，但图表高度不正确： Wrong_height_charts

在上面的例子中，如果我尝试在height css 设置中将vh 切换为%，那么图形的高度是正确的，但是宽度会出错并且我在页面底部失去了边距：@987654322 @

您知道任何解决方案以使图表适合我的<div> 并且边距/填充正确吗？或者我应该使用不同的库而不是 highchart？ 谢谢你的帮助。

编辑： 好的，我不知道是不是 dotnet highcharts 的一些错误，但是即使使用一张图，高度调整也不起作用，

我用的是这个：

<div style="height:300px; width:500px; border: 1px solid red;">
    <div style="height: 100%; width:100%;">@Model</div>
</div>

根据这个小提琴它应该可以工作http://jsfiddle.net/wkkAd/446/（如果你从容器中删除 OFF）。我想我将不得不使用不同的方法或库。

Answer 1

你在 CSS 中使用了错误的 id(#OFF-container)，它应该是 #container。

在 CSS 中将 id 更新为 #container 后，图表会正确显示，请检查此更新的小提琴 - http://jsfiddle.net/Nagasai_Aytha/wkkAd/492/

#container {
    height:100%;
    width:100%;
}