前端页面中footer高度的自动适配

程序员文章站 2022-04-22 16:39:28

...

footer高度的自动适配

问题描述：
思路：
方法：

<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";
}

作为一个后端，调样式真的很头疼