基于flex布局实现页面顶部底部固定,中间内容自适应滑动

弹性布局在手机布局中是使用很频繁的一种布局方式,本文用弹性布局来实现一个网页中底部和底部固定,中间自适应可以滚动!

效果预览:


实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<style>
body,html{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-size: 14px;
}

header,
footer {
text-align: center;
/* flex: 1;设置为1则顶体尾平分body */
background: #ccc;
}

.HolyGrail-body {
display: -webkit-flex;
display: flex;
flex: 1;
}
.Site {
display: -webkit-flex;
display: flex;
flex-direction: column;
}

.Site-content {
flex: 1;
overflow-y: scroll;
background: #0099ff;
}
</style>
</head>
<body class="Site">
<header>
<h1>六月初博客——顶部</h1>
</header>
<div class="HolyGrail-body Site-content">
<div id="" style="height: 900px;display: block;width: 100%;">
<h1 style="width: 100%;display: block;">六月初博客站</h1>
</div>
</div>
<footer>
<h2>六月初博客——底部</h2>
</footer>
</body>
</html>

关键点解释:

一个元素被定义display:-webkit-flex;则此元素即为伸缩盒模型中的伸缩容器!

flex-direction 属性规定灵活项目的方向:column(灵活的项目将垂直显示,正如一个列一样。


六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!