Question

我试图在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模板的图表时，我可以将高度设置为100％，就像在这个jfiddle中看到的那样：http://jsfiddle.net/wkkAd/149/

当我将图表放在adminLTE模板中时，高度属性不会调整图形的大小以适应框的100％。我可以改变高度的唯一方法是通过像素而不是按百分比手动设置图形的高度。 highcharts文档指出，只要在包含元素的图表上设置高度，图形的高度就是动态的。如果位置是绝对的，它可以是固定数字或甚至是百分比。

盒子类的默认高度已经达到100％，将盒体设置为100％也不起作用。

关于如何在盒子或盒体类中制作内容的所有想法都是100％？

Answer 1

在包含课程box-body的div中，在课程row之后添加div，然后在课程col-lg-12 col-md-12 col-sm-12之后添加div。高级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>

我的示例具有上述布局，主题（Chrome浏览器）中没有任何额外修改

Answer 2

好的，我知道这可能不是完成任务的最佳方式，但在阅读了很多相同问题的评论后，我找到了一个适合我的解决方案。这可能对您不起作用，但如果使用bootstrap，则可以选择尝试。

$(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的高度。只有图表在页面上时才有效。此外，是响应。在PC上测试，而不是移动。

如果有人知道更好的方法，请更新。

在这里找到这个技巧并修改为我工作：https://github.com/twbs/bootstrap/issues/1671

Highcharts图表没有填充Bootstrap框

2 个答案: