<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";
}
作为一个后端，调样式真的很头疼
1951
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
