为什么我的页脚不会移动到页面底部？答案

【问题标题】：Why won't my footer move to the bottom of the page?为什么我的页脚不会移动到页面底部？
【发布时间】：2018-02-21 17:09:50
【问题描述】：

所以我已经被这个问题困扰了一个多星期了，这让我发疯了。我想将页脚放在网页底部。出于某种原因，它只想漂浮在页面中间，就在我最后一个 div 的下方。我做了很多研究并尝试了一百万种不同的东西，但没有一个能给我我需要的结果。

以下是我尝试过的一些解决方案：

我使用了 position 属性，将其设置为 'absolute'、'relative' 和 'fixed'。 'Relative' 将页脚向下推，但也将其下方的内容向下推。 'Absolute' 将其定位在最底部，但由于某种原因，它削减了页脚的宽度。（我尝试手动调整宽度，但没有运气）。与 'fixed' 相同。
我将 body 和 html 内容的边距和内边距设置为 0。
我将body的高度设置为100%。
我检查以确保所有标签都已关闭。
我尝试将页脚放在正文之外。
我尝试在页脚之前和周围创建新的 div。

目前，我不确定问题出在哪里。有人可以帮助我吗？

body {
  background-color: white;
  background-image: url(http://michellewalling.com/wp-content/uploads/2015/10/purple-planet.jpg);
  background-size: cover;
  max-height: 100%;
}

ul {
  list-style-type: none;
  font-family: "Lucida Console";
  
}

li {
  font-size: 150%;
  font-family: Abel;
  display: inline;
  width: 390px; 
  margin: 18px;
  position: relative;
  bottom: -21px;
}


div.well {
  background-color: black;
  height: 55px;
  width: 1609px;
  position: relative;
  left: -17px;
  top: -20px;	
}

.container {
	min-height: 100%;	
}

div.main {
  background-image: url();
  text-align: center;
  position: relative;
  padding-top: 20px;
  position: relative;
  bottom: -40px;
  min-height: 100%; 
}

p {
  color: white;
  text-align: center;
  position: relative;
  bottom: -50px;
  padding-bottom: 200px; 
}

h1 {
  text-align: center;
  font-family: "Londrina Shadow";
  font-size: 600%;
  color: black;
  letter-spacing: 0.2em;
}

h2 {
  font-family: Chewy;
  font-size: 300%;
  color: black;
  padding-bottom: 20px;
  position: relative;
  top: -60px;
}

li a:hover {
	background-color: gainsboro;
	color: black;
}


.links {
  text-align: center;
  letter-spacing: 15px;  
}

.youtube {
  position: relative;
  bottom: -3px;
}

.dailymotion {
  position: relative;
  top: -1px;
}


/* html, body {
	height: 100%;
	padding: 0;
	margin: 0;	
}  */


.footer {
	background-color: black;
	height: 100px;
	padding: 0;
	margin: 0;	
}

<!DOCTYPE html>
<html>
  <head>
    <title>iHeartFandomz.net</title>
  </head>
<body>

<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Londrina Shadow" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kavivanar" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo Bhaijaan" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Acme" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Chewy" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Luckiest Guy" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" type="text/css" rel="stylesheet">

<link rel = "stylesheet" type = "text/css" href = "iheartfandomz.css"/>

<div class="container">
 <div class="col-xs-6">
   <div class="well"> 
   <ul>
     <li class="active"><a href="#Home" data-toggle="tab" style="text-decoration:none">Home</a></li>
     <li><a href="#Videos" data-toggle="tab" style="text-decoration:none">Videos</a></li>
     <li><a href="#Fanart" data-toggle="tab" style="text-decoration:none">Fanart</a></li>
   </ul>  
    </div>
     </div>

<div class="main">
		<h1>iHeartFandomz</h1>
		<h2>Fandoms Collection</h2>
	</div>

<div class="links">
  <a href="https://www.youtube.com/user/HeartzHugzKissez" target="_blank"><img class="youtube" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/youtube-512.png" style="width: 55px;"></a>
  <a href="https://twitter.com/i_Heart_fandomz" target="_blank"><img class="twitter" src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/social-twitter-icon.png" style="width: 50px;"></a>
  <a href="https://gabbykun555.deviantart.com/" target="_blank"><img class="deviantart" src="https://static.wixstatic.com/media/816933_9cc6964ab1b6426d818e3ea9859995f3~mv2.png" style="width: 50px;"></a>
  <a href="https://www.dailymotion.com/iHeartFandomz" target="_blank"><img class="dailymotion" src="https://www.drupal.org/files/project-images/dailymotion.png" style="width: 45px;"></a>
</div>  
</div>

<footer class="footer">
	<p>Here's the footer</p>
</footer>

</body>
</html>

【问题讨论】：

另外这里有一些关于 CSS Tricks 的更多信息：Sticky Footer, Five Ways.

标签： html css web position footer

【解决方案1】：

在你的css中改变

p {
  color: white;
  text-align: center;
  position: relative;
  bottom: -50px;
  padding-bottom: 200px; 
}

到

p {
  color: white;
  text-align: center;
  position: relative;
  bottom: -50px;
  padding-bottom: 0px; 
}

或者你可以试试

.footer p {
  padding-bottom: 0px !important; 
}

【讨论】：

【解决方案2】：

您的页脚中有一个p 元素，其中包含padding-bottom: 200px;。

您需要将其删除或更改p 在footer 中的样式。

【讨论】：

【解决方案3】：

试试这个。这会将您的页脚粘贴在页面底部。我还删除了页脚内段落的填充。

.footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}
.footer p {
   padding-bottom: 0;
}

【讨论】：

谢谢，这有助于将页脚向下推。但看起来页脚和页面底部之间仍有间距。有办法解决吗？
您是否应用了删除 p 底部填充的代码？
我做到了，但是将位置从“绝对”更改为“固定”似乎解决了问题。谢谢！

【解决方案4】：

工作小提琴：https://jsfiddle.net/zrbzf22v/

像这样改变你的html：

 <footer class="footer">
        <p style="  bottom: 0px;
      padding-bottom: 0px; ">Here's the footer</p>
    </footer>

【讨论】：

【解决方案5】：

.footer {
   background-color: black;
   height: 100px;
   padding: 0;
   margin: 0;
   position: absolute;
   width: 100%;
   bottom: 0;
}
p {
   padding-bottom: 0px;
}

【讨论】：

谢谢，这个解决方案非常有效。但看起来我无法更改页脚的高度。因为当我尝试这样做时，它会在页脚和页面底部之间创建更多空间。除非有办法解决这个问题？

【解决方案6】：

在底部检查您的页脚

body {
  background-color: white;
  background-image: url(http://michellewalling.com/wp-content/uploads/2015/10/purple-planet.jpg);
  background-size: cover;
  max-height: 100%;
  margin:0px;
  width:100%;
}

ul {
  list-style-type: none;
  font-family: "Lucida Console";
  
}

li {
  font-size: 150%;
  font-family: Abel;
  display: inline;
  width: 390px; 
  margin: 18px;
  position: relative;
  bottom: -21px;
}


div.well {
  background-color: black;
  height: 55px;
  width: 1609px;
  position: relative;
  left: -17px;
  top: -20px;	
}

.container {
	min-height: 100%;	
}

div.main {
  background-image: url();
  text-align: center;
  position: relative;
  padding-top: 20px;
  position: relative;
  bottom: -40px;
  min-height: 100%; 
}

p {
  color: white;
  text-align: center;
  position: relative;
  bottom: -50px;
  padding-bottom: 0px; 
}

h1 {
  text-align: center;
  font-family: "Londrina Shadow";
  font-size: 600%;
  color: black;
  letter-spacing: 0.2em;
}

h2 {
  font-family: Chewy;
  font-size: 300%;
  color: black;
  padding-bottom: 20px;
  position: relative;
  top: -60px;
}

li a:hover {
	background-color: gainsboro;
	color: black;
}


.links {
  text-align: center;
  letter-spacing: 15px;  
}

.youtube {
  position: relative;
  bottom: -3px;
}

.dailymotion {
  position: relative;
  top: -1px;
}


/* html, body {
	height: 100%;
	padding: 0;
	margin: 0;	
}  */


.footer {
	background-color: black;
	height: 100px;
	padding: 0;
	margin: 0;	
}

<!DOCTYPE html>
<html>
  <head>
    <title>iHeartFandomz.net</title>
  </head>
<body>

<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Londrina Shadow" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kavivanar" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo Bhaijaan" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Acme" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Chewy" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Luckiest Guy" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" type="text/css" rel="stylesheet">

<link rel = "stylesheet" type = "text/css" href = "iheartfandomz.css"/>

<div class="container">
 <div class="col-xs-6">
   <div class="well"> 
   <ul>
     <li class="active"><a href="#Home" data-toggle="tab" style="text-decoration:none">Home</a></li>
     <li><a href="#Videos" data-toggle="tab" style="text-decoration:none">Videos</a></li>
     <li><a href="#Fanart" data-toggle="tab" style="text-decoration:none">Fanart</a></li>
   </ul>  
    </div>
     </div>

<div class="main">
		<h1>iHeartFandomz</h1>
		<h2>Fandoms Collection</h2>
	</div>

<div class="links">
  <a href="https://www.youtube.com/user/HeartzHugzKissez" target="_blank"><img class="youtube" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/youtube-512.png" style="width: 55px;"></a>
  <a href="https://twitter.com/i_Heart_fandomz" target="_blank"><img class="twitter" src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/social-twitter-icon.png" style="width: 50px;"></a>
  <a href="https://gabbykun555.deviantart.com/" target="_blank"><img class="deviantart" src="https://static.wixstatic.com/media/816933_9cc6964ab1b6426d818e3ea9859995f3~mv2.png" style="width: 50px;"></a>
  <a href="https://www.dailymotion.com/iHeartFandomz" target="_blank"><img class="dailymotion" src="https://www.drupal.org/files/project-images/dailymotion.png" style="width: 45px;"></a>
</div>  
</div>

<footer class="footer">
	<p>Here's the footer</p>
</footer>

</body>
</html>

【讨论】：

【解决方案7】：

我使用它并且我已经在你的项目中测试过它。它的工作

footer{
        position: fixed;
        bottom: 0px;
        width: 100%;
        left: 0px;
        text-align: center;
    }

【讨论】：