固比固布局 圣杯布局 css实现传统手机app布局
手机app的布局大致上都是头部、内容、底部三部分;
我们需要实现的是头部、底部高度固定;中间内容区域自适应且可以滚动;直接贴代码;
css:
html,body {
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
section {
flex: 1;
overflow-y: scroll;
overflow-x: hidden;
}
header {
background: indianred;
width: 100%;
height: 50px;
}
footer {
background: indigo;
width: 100%;
height: 50px;
}
p {
height: 50px;
width: 100%;
}
html:
<body>
<header>头部</header>
<section>
<p>这是可以滚动的</p>
<p>这是可以滚动的</p>
<p>这是可以滚动的</p>
<p>这是可以滚动的</p>
<p>这是可以滚动的</p>
<p>这是可以滚动的</p>
<p>这是可以滚动的</p>
<p>这是可以滚动的</p>
<p>这是可以滚动的</p>
<p>这是可以滚动的</p>
</section>
<footer>底部</footer>
</body>
效果图:
固比固布局 圣杯布局 css实现传统手机app布局的更多相关文章
- CSS布局-圣杯布局
圣杯布局 圣杯布局很完美(兼容所有浏览器,包括IE6),但是使用了相对定位,布局有局限性,宽度控制要改的地方也多. 第一种方法公用部分: .lgyz, .lzrg, .lrzcg, .lcgrz, . ...
- CSS经典布局——圣杯布局与双飞翼布局
一.圣杯布局和双飞翼布局的目的 实现三栏布局,中间一栏最先加载和渲染 两侧内容固定,中间内容随着宽度自适应 一般用于PC网 二.圣杯布局的实现 技术要点: 设置最小宽度min-width 使用floa ...
- 中间自适应,左右定宽的两种经典布局 ---- 圣杯布局 VS 双飞翼布局
一.引子 最近学了些js框架,小有充实感,又深知如此节奏的前提需得基础扎实,于是回头想将原生CSS和Javascript回顾总结一番,先从CSS起,能集中它的就在基础的布局上,便查阅了相关资料,将布局 ...
- 使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)
来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...
- css总结3:Flex 布局教程:Flex-demos(转)
上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇&g ...
- 简单而兼容性好的Web自适应高度布局,纯CSS
纯CSS实现的自适应高度布局,中间内容不符自动滚动条.兼容IE9以上.chrome.FF.关键属性是box-sizing: border-box. 不废话,直接上代码: <!doctype ht ...
- 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...
- CSS学习笔记——响应式布局
响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站能够 ...
- 系列文章--精通CSS.DIV网页样式与布局学习
精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...
随机推荐
- WCF:目录
ylbtech-WCF:目录 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 作者:ylbtech出处:http://ylbtech.c ...
- 什么是EL表达式
转自:https://blog.csdn.net/hj7jay/article/details/51302466 1. EL表达式主要作用 EL表达式说白了,就是让JSP写起来更加方便,它属于JSP技 ...
- WEEX SDK集成到工程(Integrate to Android) #25
WEEX SDK集成到工程(Integrate to Android) #25 https://github.com/weexteam/article/issues/25
- Laravel异常处理
Laravel异常处理 标签(空格分隔): php 自定义异常类 <?php namespace App\Exceptions; use Throwable; use Exception; cl ...
- COM基础
为什么说COM的可重用性是建立在二进制级别? COM本身是语言无关,它的标准建立在二进制级别.对于使用COM组件的客户程序,它只需要要使用的COM对象信息就可以通过COM库的帮助创建和使用COM对象, ...
- paratest
class Program { static void Main(string[] args) { long result = 0; Stopwatch Watch = new Stopwatch() ...
- R 连接DB2数据库
1.odbc文件下载 教程: http://dasapp.oregon.gov/datamart/files/IBM_DB2_9.7_Run_Time_client_Notes.pdf 驱动地址: h ...
- C++ 简单内存泄漏检测方法
遇到个bug,MFC程序异常退出,debug模式下输出 Detected memory leaks! Dumping objects -> {366566} normal block at 0x ...
- vue 页面跳转及参数传递和接收
跳转: this.$router.push({name: 'My',params:{ id:'1',name:'anson'}}); 接收: {{this.$route.params.id}}
- POJ 2661Factstone Benchmark(斯特林公式)
链接:传送门 题意:一个人自命不凡,他从1960年开始每10年更新一次计算机的最长储存长数.1960年为4位,每10年翻一倍.给出一个年份y,问这一年计算机可以执行的n!而不溢出的最大n值 思路:如果 ...