移动端，控制头部尾部固定

最新推荐文章于 2019-05-11 00:37:00 发布
最新推荐文章于 2019-05-11 00:37:00 发布
阅读量5.9k 收藏 5
点赞数 1
分类专栏： css3 html5 文章标签： flex 移动 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangweiscsdn/article/details/75270680
版权
css3 同时被 2 个专栏收录
40 篇文章 0 订阅
订阅专栏
html5
28 篇文章 1 订阅
订阅专栏

直接上代码：

用flex布局

<!DOCTYPE html>
<html>
<head>
	<title>头尾部固定</title>
</head>
<style>
*{
	margin: 0;
	padding: 0;
}
	.container{
		display: flex;
		display: -webkit-flex;
	    min-height: 100vh;
    	flex-direction: column;
    	text-align: center;
    	font-size: 50px;
		font-weight: bold;
	}
	header,footer{
		height: 100px;
		background-color: #20b;
		line-height: 100px;
		color: #fff;
	}
	.middle{
		flex: 1;

	}
</style>
<body>

		<div class="container">
			<header>头部</header>
			<div class="middle">中间部分</div>
			<footer>尾部</footer>
		</div>
</body>
</html>
效果图如下：




Eveweiscsdn
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
页面头部和底部固定
03-17
NULL 博文链接：https://huanyq2008.iteye.com/blog/532596
marquee js实现&头尾固定中间滑动布局&移动端mate
未来以来 futureToday
04-18 881
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0,
移动端布局规范-固定页头页尾-中间随高度滑动
weixin_34068198的博客
05-11 468
<!DOCTYPE html> <html> <head> <title>移动端上下固定中间滑动</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-sca...
移动端上下固定，中间滑动效果兼容各个设备
10-30
上下滑动，头部底部固定我，无bug测试，希望能够帮助大家
css前端头尾部固定，中间内容可滑动
吃完苹果好睡觉的博客
11-23 1万+
直接复制过来了，不好意思啊，测试可用！！转载自： http://www.cnblogs.com/heyiming/p/5686212.html<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>头尾固定中间高度自适应布局</title> <style> html, body {
recylerview 添加头部 尾部
08-10
标题"recylerview 添加头部 尾部"和描述"android RecyclerView 支持添加header头部、footer尾部"正是针对这个功能的讨论。 实现RecyclerView添加头部和尾部主要有以下步骤： 1. **创建Header和Footer视图** 首先...
Android实战RecyclerView头部尾部添加方法示例
08-28
Android实战RecyclerView头部尾部添加方法示例 本篇文章主要介绍了Android实战RecyclerView头部尾部添加方法示例，通过对比ListView和RecyclerView的特点，我们可以发现RecyclerView缺少了addHeaderView和...
Android-RecyclerView添加头部与尾部
05-10
在实际应用中，我们常常需要在RecyclerView中添加头部和尾部视图，以便展示广告、分类标签或者一些额外的信息。这篇教程将详细讲解如何在RecyclerView中实现这个功能。 首先，我们需要创建一个布局文件来表示头部和...
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
10-20
本文将详细介绍如何使用`array_push()`和`array_unshift()`这两个内置函数来分别在数字索引数组的头部和尾部添加元素。 ### `array_push()`函数 `array_push()`函数是用于在数组的末尾（尾部）添加一个或多个元素...
自定义头部和尾部刷新库
11-20
描述中提到的"支持添加自定义头部和尾部"，意味着这个库不仅仅提供了默认的刷新和加载样式，还允许开发者根据自己的项目需求定制头部（即刷新视图）和尾部（加载更多视图）的界面元素和动画。这为开发者提供了更大的...
头部底部固定的另一种实现方式
e87e09e11的博客
11-22 651
需求：点击按钮 页面左侧或右侧滑出一个小窗口，头部，底部固定，中间内容区域可以滑动滚动条查看数据，这种窗口 我一般的做法是窗口fixed定位，头部底部也fixed定位或者绝对定位都可以实现，今天看到一种新的实现方式，自信研究了一下，写了一个demo记录一下，也不知这样写好不好，刷新了自己的固有想法，所以记录一下。也劳烦大神评价指教这种写法的优缺点。 这里是标题 这里是标题
移动端页面滑动，菜单到顶部之后定位在顶部（position: sticky;）
樊小书生
03-30 1万+
在移动端的页面中，我们会遇到有一部分是一直显示的，比如说菜单项，当页面初始化的时候，它处在文档流内，当页面下滑的时候，并且菜单到达顶部之后就会一直定位在顶部，并且上滑的时候，菜单又会回到文档流。到这里大家应该会有点思路，定位在顶部不动了，那就肯定用了position: fixed；，再实现可以回到文档流，那这一块就最好使用定位布局，方便控制。下面是我根据这个来写的一个：&lt;!DOCTYPE html&gt;
手机端如何使得头部底部固定，中间不被遮住且展示完整信息
xiasohuai的博客
11-07 3984
这里用的是flex #app{ display: flex; flex-direction: column; } 中间部门写  flex:1;  所以，底部和顶部会被撑开，且固定。（这里的中间部分我用的是h5新标签，当然可以用div来写）。 注：这里面的px应当用rem转换，这里我并没有写，没有介绍。写手机端的时候，是一定要转换的。这里主要讲的是，头部和底部固定。 全部代码如下：...
React实现元素块随页面滚动而固定在浏览器顶部的一种方式
码飞_CC的博客
10-24 9704
  有一个需求：一个元素块A本来在页面中的正常位置，随着滚动条向下滚动到该元素块时变为固定在浏览器顶端，当滚动条向上滚动到元素块A时又恢复到原来的位置。   解决方法： 我们首先在react组件中添加一个boolean类型的状态needFixed，用于判断该元素块A是否需要固定。 然后在通过document.getElementById('A_ID').offsetTop获取需要固定的元素块A距...
头部和尾部固定中间自适应的布局
dianyan5615的博客
09-25 146
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>Document</title> </head> <body> <div class="con"&g...
解决IOS移动端fixed固定头部问题
少油少盐不要辣
04-11 3253
1.废话不多说，直接上代码： css部分 body{ padding: 0; margin: 0; } html,body{ width: 100%; height: 100%; } .page{ display...
H5开发：H5如何设置head头部与做到咯浏览器适配
Generon的博客
07-25 1万+
meta基础知识 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 name="format-detect
table表头和首列的表格固定-JQuery、js实现的Table表头固定
热门推荐
Harry_一棵树的博客
04-10 4万+
这个是最简单的方法，基于jQuery的解决方案,引入一个两个js就可以解决，当然也有使用css， position: sticky，这个我下一章节会讲它的优缺点，当然为了凸显jQuery的优点， 我就说话使用css的缺点：1.固定表头，和首列需要额外的html，结构复杂。2.体验效果，响应式布局很难解决，几乎没有解决 ，table固定了长宽，在其他页面会看到很别扭，影响美观。3.遇到bug，如
react实现底部固定菜单栏
Buddha_ITXiong的博客
06-01 8727
在项目中经常会碰到这种需求，底部固定的菜单栏目，本来是想直接用react-router-dom组件的navLink来实现的，因为navLink组件有个属性 activeClassName设置选中样式，默认值为active,通过这个直接给选中的当前页面添加一个选中的样式即可，但是因为我想在里面加入一个图标，这就涉及到图标也要切换了，捣鼓了一下也不知道怎么用navLink来实现，最后就只能自己来写了。...
在移动端把头部和尾部的展示取消，全屏显示
最新发布
04-30
要在移动端将头部和尾部的展示取消，并全屏显示，你可以使用CSS中的媒体查询和定位属性来实现。以下是实现的步骤： 1. 在头部和尾部的HTML代码中添加一个类或ID，例如： ```html <header class="header">... ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值