first
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html, body {
height: 100%;
margin: 0;
}
.content {
padding: 20px;
min-height: 100%;
margin: 0 auto -50px;
}
.footer,
.push {
height: 50px;
}
* {
box-sizing: border-box;
}
body {
font: 16px Sans-Serif;
}
h1 {
margin: 0 0 20px 0;
}
p {
margin: 20px 0 0 0;
}
footer {
background: #42A5F5;
line-height: 50px;
padding: 0 20px;
}
</style>
</head>
<body>
<div class="wrapper">
<h1>Sticky Footer with Negative Margin 1</h1>
<p><button id="add">Add Content</button></p>
<div class="push">
</div>
</div>
<footer class="footer">
footer
</footer>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$("#add").on("click", function() {
$("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").insertBefore(".push");
});
</script>
</body>
</html>
second
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-top: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
}
* {
box-sizing: border-box;
}
body {
font: 16px Sans-Serif;
}
h1 {
margin: 0 0 20px 0;
}
p {
margin: 20px 0 0 0;
}
footer {
background: #42A5F5;
line-height: 50px;
padding: 0 20px;
}
</style>
</head>
<body>
<div class="content">
<div class="content-inside">
Sticky Footer with Negative Margin 2
<p><button id="add">Add content</button></p>
</div>
</div>
<footer class="footer"></footer>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$("#add").on("click", function() {
$("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".content-inside");
});
</script>
</body>
</html>
thrid
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.content {
min-height: -moz-calc(100vh - 70px);
min-height: -webkit-calc(100vh - 70px);
min-height: calc(100vh -70px);
padding: 40px 40px 0 40px;
}
.footer {
height: 50px;
}
* {
box-sizing: border-box;
}
body {
font: 16px Sans-Serif;
}
h1 {
margin: 0 0 20px 0;
}
p {
margin: 20px 0 0 0;
}
footer {
background: #42A5F5;
line-height: 50px;
padding: 0 20px;
}
</style>
</head>
<body>
<div class="content">
<h1>Sticky footer with calc()</h1>
<p>
<button id="add"> Add content</button>
</p>
</div>
<footer class="footer"></footer>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$("#add").on("click", function() {
$("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".content");
});
</script>
</body>
</html>
fourth
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
padding: 20px;
}
.footer {
padding: 20px;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font: 16px Sans-Serif;
}
h1 {
margin: 0 0 20px 0;
}
p {
margin: 0 0 20px 0;
}
footer {
background: #42A5F5;
color: white;
}
</style>
</head>
<body>
<div class="content">
<h1>Sticky footer with Flexbox</h1>
<p>
<button id="add"> Add content</button>
</p>
</div>
<footer class="footer"></footer>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$("#add").on("click", function() {
$("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".content");
});
</script>
</body>
</html>
fifth
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: 1fr auto;
}
.content {
padding: 20px;
}
.footer {
grid-row-start: 2;
grid-row-end: 3;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font: 16px Sans-Serif;
}
h1 {
margin: 0 0 20px 0;
}
p {
margin: 0 0 20px 0;
}
footer {
background: #42A5F5;
color: white;
padding: 20px;
}
</style>
</head>
<body>
<div class="content">
<h1>Sticky footer with Flexbox</h1>
<p>
<button id="add"> Add content</button>
</p>
</div>
<footer class="footer">footer</footer>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$("#add").on("click", function() {
$("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".content");
});
</script>
</body>
</html>
原文
