H5 粘住底部的办法

程序员文章站 2024-01-25 10:34:41

...

Footer元素如何粘住底部，使其无论内容多或者少，Footer元素始终紧靠在浏览器的底部。我们知道，当内容足够多可以撑开底部到达浏览器的底部，如果内容不够多，不足以撑开元素到达浏览器的底部时，下面要讲的布局就是解决如何使元素粘住浏览器底部。

base.css

/*base style*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary{ margin:0; padding:0;}
body{ font-family:"\5FAE\8F6F\96C5\9ED1","Microsoft Yahei","Arial"; color:#333; background-color:#fff; font-size:15px; background-image:url(about:blank); background-attachment:fixed; overflow-x:hidden;}
a{ color:#06f; text-decoration:none;}
a:hover{ color:#f60; text-decoration:none;}
img{ border:none; vertical-align:middle; max-width: 100%;}
i,em{ font-style:normal;}
li{ list-style-type:none;}
textarea{ resize:vertical;}
input, select, textarea{ font-family:"\5FAE\8F6F\96C5\9ED1","Microsoft Yahei","Arial"; background-color:#fff; margin:0; padding:0; outline:none;}

/*global style*/
.g-fl{ float:left;}
.g-fr{ float:right;}
.g-c{ zoom:1;}
.g-c:after{ clear:both; content:"."; display:block; height:0; visibility:hidden;}
.g-w{ max-width: 1200px; min-width: 980px; width: 96%; margin-left:auto; margin-right:auto;}
.g-hide{ display:none !important;}

全局增加一个负值下边距等于底部高度

demo.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="base.css" />
<style>
/*实现的原理*/
html, body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  margin-bottom: -50px;
}
.footer,
.push {
  height: 50px;
}

/*测试代码*/
.content{ background-color: #0066FF; height: 90px; color: #FFFFFF; line-height: 60px;}
.footer{ background-color: #FF6600;}
</style>
</head>
<body>
<div class="wrapper g-w">
	<div class="content">
		阅谁问君诵，水落清香浮
	</div>
	<div class="push"></div>
</div>
<div class="footer g-w">
</div>
</body>
</html>

效果图：
H5 粘住底部的办法

博客分类：境-H5 粘住底部的办法H5 粘住底部的办法