3种js+css实现移动设置底部固定菜单，极简方法-网页编程网

当前位置：主页 >> html5 >> 正文

3种js+css实现移动设置底部固定菜单，极简方法

阅读：3767 输入：2021-01-23 21:16:24

解开css中注释，共3种方式，推荐flex方法。

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>移动端固定底部菜单</title>
</head>
<body>

<div class="box">
	<div class="roll">滚动结构
		滚动结构
		 
		滚动结构
		 
		滚动结构
		 
		滚动结构
		 
		滚动结构
		 
		滚动结构
		 
		滚动结构
		 
		滚动结构
		 
		滚动结构
		 
		滚动结构
		 	
		滚动结构
		 
		滚动结构
		 
		滚动结构
		 
		滚动结构
		 
		滚动结构
		 
		滚动结构
		 
		滚动结构
		 
		滚动结构
		 
		滚动结构
		 
		滚动结构
		 
		滚动结构
		 
		滚动结构
		 
		滚动结构
		 
		滚动结构
		 
		滚动结构
		 
		滚动结构
		 
		滚动结构
		 
		滚动结构
		 
		滚动结构
		 
		滚动结构
		 	
		滚动结构
		 
		滚动结构
		 
		滚动结构
		 
		滚动结构
		 
		滚动结构
		 
		滚动结构
		 
		滚动结构
		 
		滚动结构3
		 
		滚动结构2
		 
		滚动结构1
		 
	</div>
	<footer>底部结构菜单</footer>

</div>
<style>
	html,body{
		margin: 0;
		padding: 0;
		height: 100%;
		width: 100%;
	}
	footer{
		background: green;
		width: 100%;
		font-size: 4vh;		
	}
	/*1.css固定定位,比底部菜单多一个vh
	.roll{
		padding-bottom: 5vh;
	}
	footer{
		position: fixed;
		bottom: 0;
		z-index: 999;
	}
	end 1*/
	/*css相对定位
	.box{
		position: relative;
		height: 100%;
	}
	.roll{
		position:absolute;
		top:0;
		bottom:5vh;
		width: 100%;
		height: auto;
		overflow-y: scroll;
		-webkit-overflow-scrolling:touch;

}
	footer{
		position: absolute;
		bottom: 0;
	}
	end 2*/
	/*3 弹性布局，推荐*/
	.box{
		display: flex;
		display: -webkit-flex;
		height: 100%;
		flex-direction: column;
	}
	.roll{
		flex:1;
		width: auto;
		width: 100%;
		overflow-y: scroll;
		-webkit-overflow-scrolling:touch;
	}
</style>
</body>
</html>

上一篇：采集别人的数据后，将顺序打乱再重新插入数据库sql
下一篇：html5一个div实现太极特效

相关阅读: html5视频作为页面背景，无插件; 纯js+css3实现商品类目功能; css3中flex与grid实现三栏并排显示