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

2021-01-23 网页编程网 网页编程网

解开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>

阅读原文

阅读 4138

123 显示电脑版