单页面多Highcharts图形，高度宽度自适应

最新推荐文章于 2022-09-20 11:35:07 发布

Mr_Chenph

最新推荐文章于 2022-09-20 11:35:07 发布

阅读量1.6w

点赞数

分类专栏： Web WebCool-让一切美好起来

本文链接：https://blog.csdn.net/yueritian/article/details/30777351

版权

Web 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

WebCool-让一切美好起来

11 篇文章 0 订阅

订阅专栏

数据图形展示页面，四个图形，上边俩，下边俩，客户机的分辨率不同，所以如果把图形的宽度高度写死，那么会造成屏幕显示不友好，抽空想了下，很简单

先让图形浮动，代码很简单：

<div>
    <div id="container1" style="min-width: 600px; min-height: 400px; float:left"></div>
    <div id="container2" style="min-width: 600px; min-height: 400px; float:left"></div>
    <div id="container3" style="min-width: 600px; min-height: 400px; float:left"></div>
    <div id="container4" style="min-width: 600px; min-height: 400px; float:left"></div>
</div>

使用jquery：

		$(window).resize(function() {
			var width_frm = $(document.body).width();
			var height_frm = $(document.body).height();
  			var width_div = width_frm/2;
			var height_div = height_frm/2;
			
			$('#container1').css("height", height_div);
			$('#container1').css("width", width_div);
			
			$('#container2').css("height", height_div);
			$('#container2').css("width", width_div);
			
			$('#container3').css("height", height_div);
			$('#container3').css("width", width_div);
			
			$('#container4').css("height", height_div);
			$('#container4').css("width", width_div);
		});

这里出现一个问题，无法获取高度，原因是页面的头文件格式不对，改为如下即可：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

效果如下，改变窗体大小，图形跟着变换：

Mr_Chenph

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
单页面多Highcharts图形，高度宽度自适应

数据图形展示页面，四个图形，上边俩，下边俩，客户机的分辨率不同，所以如果把图形的宽度高度写死，
复制链接

扫一扫

专栏目录

单页面多Highcharts图形，高度宽度自适应

“相关推荐”对你有帮助么？