首页 > 代码库 > FrontEnd 步步高升:header和footer始终显示在浏览器顶部和底部,中间区域自适应
FrontEnd 步步高升:header和footer始终显示在浏览器顶部和底部,中间区域自适应
思路:
- 浏览器大小改变会触发JS事件:window.onresize
- 获得浏览器大小 减去 顶部+底部 得到中间区域大小
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href=http://www.mamicode.com/"css/one.css" rel="stylesheet">>
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;
FrontEnd 步步高升:header和footer始终显示在浏览器顶部和底部,中间区域自适应
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。