javascript - 图表不适合 <div>(highcharts，MVC)错误？

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对于 %在height css 设置，那么图表的高度是正确的，但宽度出错了，我在页面底部松了边距:Wrong_width_and_margin_charts

你知道有什么解决方案可以让图表适合我的<div>吗？和边距/填充是否正确？或者我应该使用不同的库然后是 highchart？ 感谢您的帮助。

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

我用的是这个:

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

根据这个 fiddle ，它应该可以工作 http://jsfiddle.net/wkkAd/446/ (如果您从容器中删除 OFF)。我想我将不得不使用不同的方法或库。

Answer 1

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

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

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