任何类型的内容都低于我的页脚。我可以通过取出position: absolute来解决这个问题。然而，它再也不粘了。我怎样才能把它变成粘性页脚呢？
我的HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="CSS/main.css">
<link rel="stylesheet" type="text/css" href="CSS/navbar.css">
<title>Home Page</title>
</head>
<body>
<div class="contactandsocial">
</div>
<nav class="navbar navbar-default">
</nav>
<div class="container">
<div class="row">
</div>
</div>
<footer>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/42e4157b18.js"></script>
</body>
</html>
我的CSS：
footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background-color: #00AEFE;
height: auto;
}
答案 0 :(得分：1)
您有两种选择。
：一种。固定页脚（错误）
这很糟糕，因为现在有超过一半的流量来自移动设备而且屏幕空间非常宝贵，所以不应该使用固定元素占用它。另一个主要缺点是<footer>必须有一个固定的高度。或者，您可以使用javascript函数根据页脚bottom-padding更新page.load和page.resize事件的页面内容“height”。如果需要，我可以提供它，但是，再次，这是（至少在概念上），布局的错误选择：
footer {
position: fixed;
height: 100px;
bottom: 0;
width: 100%;
}
nav + .container {
margin-bottom: 120px;
}
/* this is just coloring so you can see elements, you don't need it */
body {margin: 0; padding: 0}
body > * {padding: 10px;}
.contactandsocial { background-color: #ccc;}
nav, footer { background-color: #424242; color: white;}<div class="contactandsocial">
I am contact and social
</div>
<nav class="navbar navbar-default">
I am navigation
</nav>
<div class="container">
<div class="row">
Fall asleep on the washing machine touch water with paw then recoil in horror so instantly break out into full speed gallop across the house for no reason. Scream at teh bath purr for no reason going to catch the red dot today going to catch the red dot today yet curl up and sleep on the freshly laundered towels for paw at beetle and eat it before it gets away need to chase tail, and meow loudly just to annoy owners. Throwup on your pillow chirp at birds, or gnaw the corn cob and sit on the laptop knock dish off table head butt cant eat out of my own dish curl up and sleep on the freshly laundered towels peer out window, chatter at birds, lure them to mouth. Gate keepers of hell swat at dog, so lick sellotape jumps off balcony gives owner dead mouse at present then poops in litter box snatches yarn and fights with dog cat chases laser then plays in grass finds tiny spot in cupboard and sleeps all day jumps in bathtub and meows when owner fills food dish the cat knocks over the food dish cat slides down the water slide and into pool and swims even though it does not like water, cat snacks, but going to catch the red dot today going to catch the red dot today. Bathe private parts with tongue then lick owner's face thug cat swat turds around the house, but mark territory, yet missing until dinner time. Hate dog please stop looking at your phone and pet me for knock dish off table head butt cant eat out of my own dish behind the couch leave fur on owners clothes or damn that dog and chase the pig around the house. Leave fur on owners clothes eat a plant, kill a hand but drink water out of the faucet so destroy the blinds cat is love, cat is life get video posted to internet for chasing red dot or cat slap dog in face. Lick butt cat is love, cat is life human is washing you why halp oh the horror flee scratch hiss bite eat owner's food. Mark territory spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce for why must they do that, so paw at your fat belly cat is love, cat is life sit in box, and see owner, run in terror. Cats making all the muffins meow all night having their mate disturbing sleeping humans loves cheeseburgers. Meow all night having their mate disturbing sleeping humans leave hair everywhere, or lie on your belly and purr when you are asleep lick butt. Human give me attention meow cat not kitten around licks paws chase laser meow loudly just to annoy owners. Hide at bottom of staircase to trip human catch mouse and gave it as a present. Step on your keyboard while you're gaming and then turn in a circle drink water out of the faucet. If it smells like fish eat as much as you wish lick yarn hanging out of own butt for hiss at vacuum cleaner tuxedo cats always looking dapper or eat grass, throw it back up. Kitty power! with tail in the air. Cats secretly make all the worlds muffins hate dog climb a tree, wait for a fireman jump to fireman then scratch his face fall asleep on the washing machine. Hack up furballs slap owner's face at 5am until human fills food dish. Curl up and sleep on the freshly laundered towels stare at the wall, play with food and get confused by dust but scratch leg; meow for can opener to feed me ignore the squirrels, you'll never catch them anyway but purrr purr littel cat, little cat purr purr toy mouse squeak roll over for when in doubt, wash. Man running from cops stops to pet cats, goes to jail meowing non stop for food soft kitty warm kitty little ball of furr. Unwrap toilet paper nap all day, yet play time, but scream at teh bath yet hide when guests come over, friends are not food but pushes butt to face. Instantly break out into full speed gallop across the house for no reason.
</div>
</div>
<footer>
I am footer.
</footer>
<强> B中。 Flexbox布局（好）
这是正确的解决方案。当页面不够高时页脚停留在页面底部，当页面内容超出页面时，页脚会被页面向下推。
body {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
}
body > *{
-webkit-box-flex: 0;
-webkit-flex-grow: 0;
-moz-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
body > nav + .container {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
/* this is just coloring so you can see elements, you don't need it */
body {margin: 0; padding: 0}
body > * {padding: 10px;}
.contactandsocial { background-color: #ccc;}
nav, footer { background-color: #424242; color: white;}<div class="contactandsocial">
I am contact and social
</div>
<nav class="navbar navbar-default">
I am navigation
</nav>
<div class="container">
<div class="row">
Fall asleep on the washing machine touch water with paw then recoil in horror so instantly break out into full speed gallop across the house for no reason. Scream at teh bath purr for no reason going to catch the red dot today going to catch the red dot today yet curl up and sleep on the freshly laundered towels for paw at beetle and eat it before it gets away need to chase tail, and meow loudly just to annoy owners. Throwup on your pillow chirp at birds, or gnaw the corn cob and sit on the laptop knock dish off table head butt cant eat out of my own dish curl up and sleep on the freshly laundered towels peer out window, chatter at birds, lure them to mouth. Gate keepers of hell swat at dog, so lick sellotape jumps off balcony gives owner dead mouse at present then poops in litter box snatches yarn and fights with dog cat chases laser then plays in grass finds tiny spot in cupboard and sleeps all day jumps in bathtub and meows when owner fills food dish the cat knocks over the food dish cat slides down the water slide and into pool and swims even though it does not like water, cat snacks, but going to catch the red dot today going to catch the red dot today. Bathe private parts with tongue then lick owner's face thug cat swat turds around the house, but mark territory, yet missing until dinner time. Hate dog please stop looking at your phone and pet me for knock dish off table head butt cant eat out of my own dish behind the couch leave fur on owners clothes or damn that dog and chase the pig around the house. Leave fur on owners clothes eat a plant, kill a hand but drink water out of the faucet so destroy the blinds cat is love, cat is life get video posted to internet for chasing red dot or cat slap dog in face. Lick butt cat is love, cat is life human is washing you why halp oh the horror flee scratch hiss bite eat owner's food. Mark territory spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce for why must they do that, so paw at your fat belly cat is love, cat is life sit in box, and see owner, run in terror. Cats making all the muffins meow all night having their mate disturbing sleeping humans loves cheeseburgers. Meow all night having their mate disturbing sleeping humans leave hair everywhere, or lie on your belly and purr when you are asleep lick butt. Human give me attention meow cat not kitten around licks paws chase laser meow loudly just to annoy owners. Hide at bottom of staircase to trip human catch mouse and gave it as a present. Step on your keyboard while you're gaming and then turn in a circle drink water out of the faucet. If it smells like fish eat as much as you wish lick yarn hanging out of own butt for hiss at vacuum cleaner tuxedo cats always looking dapper or eat grass, throw it back up. Kitty power! with tail in the air. Cats secretly make all the worlds muffins hate dog climb a tree, wait for a fireman jump to fireman then scratch his face fall asleep on the washing machine. Hack up furballs slap owner's face at 5am until human fills food dish. Curl up and sleep on the freshly laundered towels stare at the wall, play with food and get confused by dust but scratch leg; meow for can opener to feed me ignore the squirrels, you'll never catch them anyway but purrr purr littel cat, little cat purr purr toy mouse squeak roll over for when in doubt, wash. Man running from cops stops to pet cats, goes to jail meowing non stop for food soft kitty warm kitty little ball of furr. Unwrap toilet paper nap all day, yet play time, but scream at teh bath yet hide when guests come over, friends are not food but pushes butt to face. Instantly break out into full speed gallop across the house for no reason.
</div>
</div>
<footer>
I am footer.
</footer>
上述（B.）解决方案的未加前缀的CSS是：
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
body > *{
flex-grow: 0;
}
body > nav + .container {
flex-grow: 1;
}
将每个代码段设为全屏，并调整浏览器窗口大小以查看它们的工作方式。
答案 1 :(得分：0)
您应该将页脚位置更改为position: fixed;。