How the Footer element sticks to the bottom so that no matter more or less content, the Footer element is always close to the bottom of the browser. We know that when there is enough content to stretch the bottom to reach the bottom of the browser, if there is not enough content to stretch the element to reach the bottom of the browser, the layout to be discussed below is to solve how to make the element stick to the bottom of the browser.
base.css
/*basic 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;}
Globally add a negative value to the bottom margin equal to the bottom height
demo.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="base.css" />
<style>
/*Principle of implementation*/
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin-bottom: -50px;
}
.footer,
.push {
height: 50px;
}
/*Test code*/
.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">
Who to read and ask the king to recite, the water falls and the fragrance floats
</div>
<div class="push"></div>
</div>
<div class="footer g-w">
</div>
</body>
</html>
Effect picture: