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

Posted 经验源于积累

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了分享展示高度和宽度样式优化问题:相关的知识,希望对你有一定的参考价值。

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,这个数值请根据项目的实际情况来定

以上是关于分享展示高度和宽度样式优化问题:的主要内容,如果未能解决你的问题,请参考以下文章

Android获取片段中的布局高度和宽度

js和jquery如何获取图片真实的宽度和高度_javascript技巧

无法使Slider具有响应能力

Html Canvas:宽度/高度属性和宽度/高度样式之间的区别[重复]

宽度100%,高度自适应

HTML,VUE,嵌入iframe,实现iframe的100%高度和宽度,代码分享