Highcharts图不填充引导框

我试图在Bootstrap AdmimLTE模板中显示一个高图。我正在使用内容类部分在其中放置一个包含高热图的盒子类。Highcharts图不填充引导框

<section class="content"> 
    <!-- Default box --> 
     <div class="box"> 
     <div class="box-header"> 
     </div> 
     <div class="box-body"> 
      <div id='chartID'></div> 
     </div> 
     </div> 
</section>

当使用图表而不adminLTE模板，我可以设置高度为像在本jfiddle如图100％：http://jsfiddle.net/wkkAd/149/

当我把图表中的adminLTE模板，高度属性是不调整图表以适合盒子的100％。我可以改变高度的唯一方法是手动设置图形的高度，而不是按百分比。 highcharts文档指出，只要您在图表的包含元素上设置高度，图形的高度就会动态变化。如果位置是绝对的，它可以是固定数量或者甚至百分之一。

箱子类已经具有100％的默认高度，并且将箱体设置为100％也不起作用。

关于如何使框内或框体内的内容全部100％的任何想法？

来源

2017-02-10 luskbo

在与row类和分度col-lg-12 col-md-12 col-sm-12类类box-body附加的div股利后的highchart DIV。所以最终的布局将是

<section class="content"> 
    <!-- SELECT2 EXAMPLE --> 
    <div class="box"> 
     <div class="box-header with-border"> 
     <h3 class="box-title">Select2</h3> 
     <div class="box-tools pull-right"> 
      <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> 
      </button> 
      <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-remove"></i> 
      </button> 
     </div> 
     </div> 
     <!-- /.box-header --> 
     <div class="box-body"> 
     <div class="row"> 
      <div class="col-lg-12 col-md-12 col-sm-12"> 
       <div id="container" style="width:100%;margin: 0 auto"></div> 
      </div> 
     </div> 
     <!-- /.row --> 
     </div> 
     <!-- /.box-body --> 
     <div class="box-footer"> 
     Visit <a href="https://select2.github.io/">Select2 documentation</a> for more examples and information about the plugin. 
     </div> 
    </div> 
</section>

我上面布置的样品没有主题（任何多余的修饰铬浏览器）

来源

2017-02-10 19:22:58

感谢您的更新。我已经尝试过你所描述的内容，但它并不适合我。为了复制，我下载了AdminLTE和Highcharts的全新副本。我没有修改任何内容的样式，只是用高图形演示图表放下代码。相同的结果...你在这个主箱子下面有一个盒子吗？想知道这个盒子是否填满了你的例子中的屏幕高度。您是否能够将图形显示在图像中，并排出第二行？ – luskbo

好吧，我知道这可能不是完成任务的最佳方式，但读同一问题的许多审查后，我来到了一个为我工作的解决方案。这可能对您不适用，但如果使用引导，它可能是一个尝试的选项。

$(window).resize(function(){ 
    $('#chartID').height($(window).height() 
        - $(".navbar").height() 
        - $(".main-footer").height() 
        - $(".main-header").height() 
        - $(".box-header").height() 
        - $(".box-footer").height() 
        - parseInt($('#cws_blocks').css("margin-bottom")) 
        - parseInt($('#cws_blocks').css("margin-top")) 
        - parseInt($(".main-sidebar").css("padding-bottom")) 
        - parseInt($('.content').css("padding-bottom")) 
        - parseInt($('.content').css("padding-top")) 
        - parseInt($(".main-footer").css("padding-bottom")) 
        - parseInt($(".main-footer").css("padding-top")) 
        - parseInt($(".box").css("padding-bottom")) 
        - parseInt($(".box").css("padding-top")) 
        - parseInt($(".box-header").css("padding-bottom")) 
        - parseInt($(".box-header").css("padding-top")) 
        - parseInt($(".box-footer").css("padding-bottom")) 
        - parseInt($(".box-footer").css("padding-top"))      
        ); 
    }) 
    $(window).resize();

此外，这可能有点矫枉过正，但目前它是适用的解决方案。我基本上只是通过减去图表上方和下方元素的高度和填充来调整highcharts div的高度。只有图形在页面上才有效。此外，是响应。在电脑上测试，而不是移动。

如果有人知道更好的方法来做到这一点，请更新。

发现此技巧并修改为适用于我：https://github.com/twbs/bootstrap/issues/1671

来源

2017-02-11 18:45:03 luskbo

Highcharts图不填充引导框

回答

相关问题