前端蜗牛

adeng.y个人博客


移动web页面flex上下固定中间滚动布局

发布时间:2018-08-01 作者:阿灯 阅读量:169

小伙伴们在做移动web页面的时候应该会遇到很多固定滚动布局,今天分享一个display:flex 布局的布局。


效果图:



效果代码:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>flex上下固定中间滚动布局</title>
<meta name="keywords" content="display:flex,adng.y,adengweb,套马汉子哥,前端,css3,jquery,jq插件特效,snail前端">
<meta name="description" content="flex上下固定中间滚动布局,adeng记录一下生活的点滴">
<style>
*{ margin: 0; padding: 0; }
html,body{height:100%;}
.wrap{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column;width:100%;height:100%;}
.header,.footer{ position: fixed; width: 100%; left: 0; height:40px;line-height:40px;background:#67a9e2;color: #fff; text-align:center;}
.footer{ bottom: 0; }
.main{-webkit-box-flex:1;-webkit-flex:1;flex:1;width:96%; padding: 48px 2%; -webkit-overflow-scrolling: touch;}
</style>
</head>
<body>
<div class="wrap">
  <div class="header">header</div>
  <div class="main">
   flex体验demo:<br>
   弹性滚动区域<br>
   弹性滚动区域<br>
   弹性滚动区域<br>
   弹性滚动区域<br>
   弹性滚动区域<br>
   弹性滚动区域<br>
   弹性滚动区域<br>
   弹性滚动区域<br>
   弹性滚动区域<br>
   弹性滚动区域<br>
   弹性滚动区域<br>
   弹性滚动区域<br>
   弹性滚动区域<br>
   弹性滚动区域<br>
   弹性滚动区域<br>
   11111111111<br>
  </div>
  <div class="footer">footer</div>
</div>
</body>
</html> 


flex体验demo:


/data/file/20180727/20180727182528_91546.html





标签云

© adeng.y 粤ICP备17049299号
Catfish Blog | 后台