应用场景:由于使用了jquery.smartwizard组件来做一个分步操作向导功能页面,整个步骤内容无法设置高度为100%或auto,会有步骤内容错乱,暂未知原因,只能设置固定值,但是会有一个问题,用户的PC的电脑屏幕大小和分辨率有可能是不一样的,如果我们定死了高度,则在不同大小的屏幕网页显示不会自适应高度,始终保持固定高度,显示不友好。
解决方案:获取iframe高度的同时减去其他内容高度占比,然后赋值给步骤内容高度即可,设置当网页大小发生变化同步刷新高度设置。
代码:(网页变化同步刷新高度设置+获取Iframe高度)
window.onresize = function () { //浏览器被重置大小时执行的操作
setHeight();
}
function setHeight() {
var bodyHight = document.body.clientHeight; //body的css高度
var htmtHight = document.documentElement.clientHeight; //HTML的css高度
console.log(hight, htmtHight);
var x = document.getElementsByClassName('div-step-container'); //步骤内容高度
var y = document.getElementById('task-content') //包含步骤的主体高度
for (var i = 0; i < x.length; i++) {
x[i].style.height = (bodyHight - 109) + "px"; //整个iframe的高度减去(顶部步骤向导高度+底部栏高度)
y.style.height = (bodyHight - 109) + "px"; //等同于上面
}
}