在做项目的时候遇到了一个需求,要求一个div的宽度随着浏览器可是区域大小来自动改变,差了很多文档,因为是新手所以一直没有解决,现在完成了这个功能,特地来写下心得。
可使用js的方法:
function EchartChange(){
//自动获取浏览器宽度,和img宽度,然后得出EChart的宽度。
debugger;
var clientWidth = $(window).width() || document.body.clientWidth;//clientWidth 为浏览器的宽度
var clientHeight = $(window).height() || document.body.clientHeight;//clientHeight 为浏览器的高度
var imgWidth = document.getElementById("div_topleft").offsetWidth;//获取一个imgWidth 的div的宽度,我的这个div宽度是固定的。
var topright = document.getElementById("div_topright");//topright 是你需要根据浏览器窗口大小改变宽度的那个div
topright.style.width=(clientWidth-imgWidth)+"px";//给topright 赋值,即总宽度-部分div宽度
echartWidth.style.width=(clientWidth-imgWidth-30)+"px";//这个是topright 的div中的某个div,可要可不要。
}
这里需要注意,每个人的情况不同,所以需要根据需求有所改变,我的是左侧div宽度固定,右侧div需要随窗口大小而改改变宽度。同理高度也是如此。
此时你只是完成了对宽度设置的一个方法,你还需要添加一个事件,一个浏览器窗口改变即可触发的事件,我用的resize.应该还有其他的方法,可以多试试。我这里的代码是:
$(window).resize(function() {
EchartChange();
myChart1.resize();
});
其中的myChart是其他的一个div;还有一种方法是jquery这里就不说明了,因为俺还没遇到。。
有帮助请采纳,谢谢。