图表不适合<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

在上面的示例中，如果我尝试在vh css设置中为%切换height，那么图表的高度是正确的，但是宽度出错并且我在底部松开了边距页面：Wrong_width_and_margin_charts

你知道任何解决方案，以便图表符合我的<div>和边距/填充是正确的吗？或者我应该使用不同的库然后高图？ 谢谢你的帮助。

编辑： 好的，我不知道它是否是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%;
}