任何类型的内容都超出了我的页脚。我可以通过删除 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;
}
最佳答案
你有两个选择。
A.固定页脚(不好)
这很糟糕，因为现在超过一半的流量来自移动设备，屏幕空间非常宝贵，您不应该用固定元素占用它。另一个主要缺点是 <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;
}
将每个片段全屏显示并调整浏览器窗口的大小以查看它们的工作方式。
关于html - 内容超过页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41401759/