关键词：
实现顶部与底部固定的效果十分容易，且很多人都会选择用这个方式，就是顶部position:fixed，底部也position:fixed。实现的效果就像下面两张图，container区域是布满整个屏幕的，且滚动条也是滚动在整个屏幕中，调内容区时只能调节高度。
其实还有一种方式可以实现较好的效果，就是内容区只在顶部和底部的中间，内容部分和滚动条也只是中间区域滚动
实现代码：
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0">添加到页面上。
<div class="top">
<p>顶部</p>
</div>
<div class="container-wrap">
<div class="container">
<p>移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢？这就该轮到meta标签出场了。移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢？这就该轮到meta标签出场了。移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢？这就该轮到meta标签出场了。移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢？这就该轮到meta标签出场了。移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢？这就该轮到meta标签出场了。移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢？这就该轮到meta标签出场了。移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢？这就该轮到meta标签出场了。移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢？这就该轮到meta标签出场了。</p>
</div>
</div>
<div class="footer">
<ul>
<li>首页</li>
<li>购物中心</li>
<li>我</li>
</ul>
</div>
css:
<style>
*{padding: 0;margin: 0;font-family: 'Microsoft Yahei';}
.top{width: 100%;height: 60px;background-color: #999;position: fixed;top: 0;}
.top p{color: #333;line-height: 60px;text-align: center;font-size: 22px;}
.container-wrap{height: 100%;overflow: hidden;}
.container{position: absolute;top: 60px;bottom: 60px; overflow-y: scroll;overflow-x: hidden;}
.container p{font-size: 20px;line-height: 32px;padding: 10px 15px;}
.footer{width: 100%;height: 60px;border-top:1px solid #999;position: fixed;bottom: 0;background-color: #fff;}
.footer ul{list-style: none;}
.footer ul li{float: left;width: 33.3%;text-align: center;line-height: 60px;color: #333;}
</style>
这样实现就能实现内容只在contianer滚动了。十分简单~
stickyfooter实现
常有这样的需求，比如将footer“固定”在底部，如果内容区没有占满整个屏幕，footer固定在底部，若内容区超过屏幕，则footer处于内容区的尾部。总之就是内容铺不满，footer固定在窗口底部，若内容能铺满，则处于内容区下面。... 查看详情
解决ios移动端，滑动回弹效果遮挡页面顶部和底部fixed元素的问题
...流畅，很木的效果。-webkit-overflow-scrolling:属性控制元素在移动设备上是否使用滚动回弹效果.auto:使用普通滚动,当手指从触摸屏上移开，滚动会立即停止。touch:使用具有回弹效果的滚动,当手指从触摸屏上移开，内容会继续保持一... 查看详情
移动端h5技巧之sticky布局
参考技术A比如这个场景，不管内容多少，你始终需要让“关闭的按钮”在底部固定的位置距离页面顶部大于一定值，表现为position:relative;距离页面顶部小于一定值，表现为position:fixed; 查看详情
移动端弹窗滚动时，底部盒子跟着一起滚动
解决方案 在弹出弹窗的时候，设置window最外层定位为fixed，这样window便不会滚动了，在关闭弹窗的时候，设置window体定位为static，window便可重新滚动。 另外，弹出时设置定位为fixed会使window回到顶部，可以通过js获取当时... 查看详情
ios11移动端兼容性滚动问题
参考技术A属性控制元素在移动设备上是否使用滚动回弹效果1.2取值auto：使用普通的滚动效果。当手指从设备的触摸屏上离开时，滚动会立即停止touch：使用具有回弹效果的滚动。当手指从设备的触摸屏上离开时，滚动区域的内... 查看详情
将 UIScrollView 中的内容视图固定到其底部而不是其顶部边缘
】将UIScrollView中的内容视图固定到其底部而不是其顶部边缘【英文标题】：PincontentviewinUIScrollViewtoitsbottomratherthanitstopedge【发布时间】：2018-05-2118:21:19【问题描述】：默认情况下，UIScrollView将其内容视图固定在其顶部边缘，即当... 查看详情
js吸顶效果与布局
...用的吸顶效果，如果页面没有固定定位的元素是比较容易实现的，但是如果页面结构比较复杂会有兼容性问题常见兼容性问题：吸顶元素无法固定，会随着页面滚动抖动解决方案：页面整体为弹性布局，中间加载部分自适应高度... 查看详情
第31章项目实战-pc端固定布局5
...HTML5和CSS3来构建Web页面，第一个项目采用PC端固定布局来实现。一．底部区域本节课，我们将探讨一下首页中最底部的区域。这部分区域由两个部分组成，一个是说明内容，有：合作伙伴、旅游FAQ和联系方式，还有一个就是版权... 查看详情
移动端固定头部和固定左边第一列的实现方案（vue中实现demo）
...左边部分；上下滚动时，固定头部部分。代码在Vue中简单实现主要思路是:a.左边部分滚动，实时修改右边部分的滚动条高度b.头部和内容部分都设置固定高度，当内容部分内容高度大于设置的高度时，产生滚动条c.左右部分也设... 查看详情
android实现布局顶部底部上下滑动效果(代码片段)
Android实现布局顶部底部上下滑动效果关于效果实现修改MapSearchActivity.kt文件关于 最近一个项目的新需求才让我知道自己很多基本功都不扎实，一个简单的底部滑入滑出就让我摸不着头脑了，后面还是去看了以前买的... 查看详情
在固定标题下方显示内容
...的页面有一个固定的标题，我知道这会导致内容流从页面顶部开始。我一直在寻找解决方法，但似乎没有任何效果，例如thisone下面是代码，这里是codepen-你可以看到我的article中的内容显示在页面顶部，尽管它位于我的html底部。... 查看详情
【axure】触摸屏上下滑动效果
...”动态面板——>交互选择【拖动时】底层面板添加【移动】动作，移动方式选择【垂直移动】3.2拖动结束时事件选中“内容”动态面板——>交互选择【拖动时】添加条件1（上划不过顶部菜单）滑动效果添加条件2（触碰顶... 查看详情
在顶部/底部嵌入 iframe
...旦我注入iframe，它就会出现在页眉/页脚的顶部。我想要实现的是注入它并移动页眉/页脚，这样它就不会出现在它上面。iframe.html<body> 查看详情
将html页面页脚固定在页面底部(多种方法实现)
当一个HTML页面中含有较少的内容时，Web页面的footer部分随着飘上来，处在页面的半腰中间，给视觉效果带来极大的影响，接下来为大家介绍下如何将页脚固定在页面底部，感兴趣的朋友可以了解下 作为一个Web的... 查看详情
携程移动端架构演进与优化之路
...架构探索，在实践过程中也经历了各种曲折与压力，最终实现了2015年的这个全新架构，实现了无线服务端基于APIGateway的架构框架、客户端的模块化开发、测试与部署，支持运行期间的模块实时加载、按需Lazyloding、Remote加载，从... 查看详情
实现移动端上拉加载效果
...有用到上拉加载的效果。今天就整理了一下。上拉加载的实现思路其实很简单：1.移动端触发touchmove事件(上拉)2.判断最后一个元素是否已出现在底部3.若出现，则js添加元素到页面末尾思路图：接下来开始编写style样式：html,body{ m... 查看详情
js+css网页固定右下角回到顶部让它固定在底部怎么做
...tml>追问就是QQ空间还有淘宝跟滚动条一起动的那个返回顶部让他在最下边不动求代码详细的追答你把我的代码存成一个HTML文件，就是那个效果啊。本回答被提问者采纳 参考技术Bhttp://maxiaojia0209.blog.163.com/blog/static/11837526320116149... 查看详情
移动端h5页面注意事项
...常用尺寸：7501334/6401134，包含了手机顶部信号栏的高度。移动端H5活动页面常常需要能够分享到各种社交App中，常用的有微信、QQ等。使用移动设备查看页面时会发现，在微信浏览器中有顶部导航栏，在qq内置浏览器里不止有顶部... 查看详情