FrontEnd 步步高升:header和footer始终显示在浏览器顶部和底部,中间区域自适应

来源：互联网发布：外国对三体的评价知乎编辑：程序博客网时间：2024/05/03 09:01

思路:

浏览器大小改变会触发JS事件:window.onresize
获得浏览器大小减去顶部+底部得到中间区域大小

HTML:

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <link href="css/one.css" rel="stylesheet">    <script src="js/one.js" type="text/javascript"></script></head><body>    <header id="headBlock"></header>    <div    id="bodyBlock" class="body"></div>    <footer id="footBlock"></footer></body></html>

CSS:

/* 韦哥说 这里是必须的,这才是真正项目用到的 */html{    height: 100%:}body{    height: 100%;    margin: 0;}/**********************************************/#headBlock {    height: 60px;    background-color: red;}#footBlock {    height: 60px;    background-color: yellow;}.body {    background-color: blue;    overflow-y: scroll;}

JS:

function reSizeBodyBlock() {    "use strict";    var browserHeight = document.documentElement.clientHeight,        headHeight    = document.getElementById("headBlock").offsetHeight,        footHeight    = document.getElementById("footBlock").offsetHeight,        bodyBlockHeight = (browserHeight - headHeight - footHeight).toString() + "px";  //为什么要加toString()? 因为代码要给更多的人看!!!!    document.getElementById("bodyBlock").style.height = bodyBlockHeight;}window.onload = window.onresize = reSizeBodyBlock;

/* ------------------------------------------------------------------ 2015-02-12 17:03:43 ------------------------------------------------------------------ */

更简单灵活的方法：

function initFullBlockBlock() {    if (!document.getElementById("full-block")) return;    var fullBlockHeight = document.getElementById("full-block").offsetHeight,        browserHeight = document.documentElement.clientHeight,        bodyHeight = document.getElementsByTagName("body")[0].offsetHeight;    bodyBlockHeight = (browserHeight - bodyHeight + fullBlockHeight).toString() + "px";    document.getElementById("full-block").style.height = bodyBlockHeight;}

0 0