分享展示高度和宽度样式优化问题：

Posted 2020-10-31 经验源于积累

1.html定义：

                    <!--chart container-->
                    <div id=‘chart_div‘ style="overflow-x:auto;border:1px solid #a2a2a2;">
                        <div id="chart_container" style="min-width:93%;width:<?php echo $chart_div_width;?>;height:500px;min-width:93%;margin:15px auto 10px auto;"></div>
                    </div>

    2. JS动态控制‘chart_container’ div的高度, 注意有的时候需要指定一个最小的高度，当js检测页面的高度小于这个设置的默认最小高度的时候用最小高度

                    <!--改变div高度,动态-->
                    <script type="text/javascript">
                        $(document).ready(function() {
                            //set chart container height
                            var chart_height = $(window).height()-$("#chart_div").prop("offsetTop")-25;
                            $("#chart_div").css("height", chart_height); //有时候不需要这个
                            $("#chart_container").css("height", chart_height-20);
                        });
                    </script>

    3. 通过‘chart_container‘的 min-width和width属性来控制‘chart_container‘的宽度， 给外层的‘chart_div‘设置overflow-x:auto这样就能达到理想的宽度，在PHP中可以计算要显示的柱状图的个数

                $chart_div_width = count($all_time_array)*25."px";//每个柱状图的最小宽度为25px，这个数值请根据项目的实际情况来定