当前位置:首页 > 网站应用 > 正文内容

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

cjw1231年前 (2023-11-01)网站应用2160

解开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>
<!--
<p>以百分数为主,但px(固定)要弃之。
vw,1vw视口宽度的1%;</p>
<p>定位(position)->布局(flex)->内容位置(div)</p>
<p>vh,vw,%,flexbox,vh,vw,rem,em</p>
-->
<div class="box">
	<div class="roll">滚动结构
		滚动结构
		<br />
		滚动结构
		<br />
		滚动结构
		<br />
		滚动结构
		<br />
		滚动结构
		<br />
		滚动结构
		<br />
		滚动结构
		<br />
		滚动结构
		<br />
		滚动结构
		<br />
		滚动结构
		<br />	
		滚动结构
		<br />
		滚动结构
		<br />
		滚动结构
		<br />
		滚动结构
		<br />
		滚动结构
		<br />
		滚动结构
		<br />
		滚动结构
		<br />
		滚动结构
		<br />
		滚动结构
		<br />
		滚动结构
		<br />
		滚动结构
		<br />
		滚动结构
		<br />
		滚动结构
		<br />
		滚动结构
		<br />
		滚动结构
		<br />
		滚动结构
		<br />
		滚动结构
		<br />
		滚动结构
		<br />
		滚动结构
		<br />
		滚动结构
		<br />	
		滚动结构
		<br />
		滚动结构
		<br />
		滚动结构
		<br />
		滚动结构
		<br />
		滚动结构
		<br />
		滚动结构
		<br />
		滚动结构
		<br />
		滚动结构3
		<br />
		滚动结构2
		<br />
		滚动结构1
		<br />
	</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>


扫描二维码推送至手机访问。

版权声明:本文由追求完美发布,如需转载请注明出处。

本文链接:https://cjw123.com/blog/?id=29

标签: htmljscss
分享给朋友:

相关文章

html meta标签屏蔽搜索引擎的用法

html页面中的 meta 标签可以用来识别搜索引擎的蜘蛛类型,可以规定meta标签所在的html页面是否被蜘蛛抓取,下面是这个meta标签的用法,大家可以借鉴一下。搜索引擎的 meta 标签的解析下面是meta标签对搜索引擎的解析<meta name='robot...

JS实现联想、自动补齐功能

<html> <head> <meta charset="utf-8"> <style> * { box-sizing: border-box; } body {...

谷歌免费网站ico图标接口

分享个免费有用的ico图标的接口,可以使用谷歌提供的友链ico接口读取网址的ico图标,就可以很轻松的实现为网站友情链接增加ico图标。ico图标接口:https://t1.gstatic.cn/faviconV2?client=SOCIAL&type=FAVICON&fallbac...

摇摆的灯光

点击运行看演示效果!<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">...

css3+html5特效制作闪烁的文字

<head><charset="utf-8" /> <style> @-webkit-keyframes flash {     0%{   &n...

生日快乐气球特效代码

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。