移动页面框架头尾固定中间滚动 absolute模拟fixed

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>absolute模拟fixed</title><!-- Sets initial viewport load and disables zooming  --><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"><!-- Makes your prototype chrome-less once bookmarked to your phone's home screen --><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><style>html,
body{height:100%;margin:0;padding:0;}
header,footer{height:40px; text-align:center; position:absolute; width:100%; line-height:40px; background:#fff; z-index:2;}
header{border-bottom:1px solid #ccc;top:0;}
footer{border-top:1px solid #ccc;bottom:0;}
h1{margin:0; }
.content{position:absolute;top:40px;left:0;right:0;bottom:40px; box-sizing:border-box;overflow-y:auto;-webkit-overflow-scrolling:touch;}</style></head><body><!-- Make sure all your bars are the first things in your <body> --><header class="bar bar-nav"><h1 class="title">header</h1></header><!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) --><div class="content"><h2>content</h2><h2>content</h2><h2>content</h2><h2>content</h2><h2>content</h2><h2>content</h2><h2>content</h2><h2>content</h2><h2>content</h2><h2>content</h2><h2><input /></h2><h2>content</h2><h2>content</h2><h2>content</h2><h2>content</h2><h2>content</h2><h2>content</h2><h2>content</h2><h2>content</h2><h2>content</h2><h2>content</h2><h2>content</h2><h2>content</h2><h2>content-last</h2></div><footer class="bar bar-footer"><h1 class="title">footer</h1></footer></body>
</html>

转载于:https://blog.51cto.com/456508/1568636

移动页面框架头尾固定中间滚动 absolute模拟fixed相关推荐

CSS绝对定位模拟固定定位(absolute模拟fixed)
滚动条的产生滚动条在谁身上初始包含块 <!DOCTYPE html> <html><head><meta charset="UTF-8" ...
html怎么制作固定背景,使用CSS制作的页面背景固定和滚动效果
HTML HTML结构很简单,一个class为.cd-fixed-bg的div元素用于放置固定背景图,一个class为.cd-scrolling-bg的div元素用于滚动的部分.我们可以放置多个.cd ...
vue、html 实现头尾固定，中间滚动的布局(移动端常见的布局)
前言: 头尾固定,中间滚动的布局,这种布局很常见,移动端.pc端都常见.不过移动端居多. 实现过程: html实现过程其实就是一个盒子里面三个部分头,身体,脚 . 身体的高度需要减去头和 ...
html页面左右滑动固定插件,jQuery全屏滚动插件fullPage.js让你的页面分屏滚动
随着扁平化风格的日益流行,越来越多的网页越来越简单但又看上去高大上,比如小米.魅族.苹果等等知名站点的新品页面,以及360.百度等网站的专题页面越来越采用分屏滚动的风格. 当然实现这种风格的方法有多种 ...
table固定表头滚动
一.table固定表头滚动(不兼容IE) 使用scrollTop监听滚动如下例 1.html <div class="tabflow" id="flowta ...
Razor的主版页面框架
类似于2.0版本中的MasterPage主版页面框架,不过mvc3.0推出的RazorView内建的主版页面语法与原本的webFormview的MasterPage相差甚远 1,Razor的页面执行顺 ...
flex布局实现头尾固定，中间内容自适应
头尾固定,中间区域可以滑动效果是移动端最常见的效果,以京东页面为例.以前开发时常用的方法是用固定布局 position: fixed; 实现,但是该方法在 ios 上或者其他机型上会出现问题.现在,可 ...
Vue中el-table追加行后固定列滚动错位问题
Vue中el-table追加行后固定列滚动错位问题一.问题描述偶然发现一个问题,但是并没有找到解决方案,自己调试了两个多小时终于解决. 先贴出问题业务描述:在已查询完全部的符合条件的数据后,表格 ...
ASP.NET母版页（Razor主版页面框架）
本篇介绍一下 ASP.NET 中强大的Razor语法,以及下篇我们将介绍,在Java环境中,依靠VUE组件实现此功能. Asp.NET Razor母版页介绍 ASP.NET 2.0 推出了Maste ...
div+css实现表头固定内容滚动表格
<div class="m-demo"><table><thead><tr><th>定宽a</th>< ...

移动页面框架头尾固定中间滚动 absolute模拟fixed

移动页面框架头尾固定中间滚动 absolute模拟fixed相关推荐

最新文章

热门文章