基于flex布局实现页面顶部底部固定,中间内容自适应滑动
CSS
2019-03-04 17:18:27
弹性布局在手机布局中是使用很频繁的一种布局方式,本文用弹性布局来实现一个网页中底部和底部固定,中间自适应可以滚动!
效果预览:
实现代码:
<!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(灵活的项目将垂直显示,正如一个列一样。)

890篇文章
4817人已阅读