![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/316c26d6989cdd0fbfc852e5ac8adadf.png)
<body>
<header id="header">~~</header>
<div id="content">~~</div>
<footer id="footer">~~</footer>
</body>
问题描述:
实现一个页面字体和大小自定义的功能后,页面的元素之前定好的height不适应了。像图片中,字体变大后,把footer顶下去了。
思路:
通过js动态改变content的高度,来替代css中的height: calc(100% - 定好高度px);,因为header和footer字体和大小定好后不会再变化,只有页面缩放过程中content的高度会变化。
方法:
直接上js代码
window.onresize = () =>{
var headerHight = $('#header').innerHeight();
var footerHight = $('#footer').innerHeight();
$("#content").css("height",$(window).height()-(headerHight + footerHight)+"px");
}
onresize 事件会在窗口或框架被调整大小时发生
js原生语法
window.onresize = () =>{
var headerDiv = document.getElementById("header");
var contentDiv = document.getElementById("content");
var footerDiv = document.getElementById("footer");
var headerHight = headerDiv.clientHeight;
var footerHight = headerDiv.clientHeight;
contentDiv.style.height = $(window).height()-(headerHight + footerHight) + "px";
}
作为一个后端,调样式真的很头疼