为啥我的页脚不会移动到页面底部？

Posted

技术标签:

【中文标题】为啥我的页脚不会移动到页面底部？【英文标题】：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. 【参考方案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;

【讨论】：

以上是关于为啥我的页脚不会移动到页面底部？的主要内容，如果未能解决你的问题，请参考以下文章

动态添加的页脚不会停留在 ASP.NET 页面的底部

流体布局底部的页脚

网页的页脚没有延伸到页面的最底部

如何强制我的页脚粘在 CSS 中任何页面的底部？

CSS：页面底部的页脚重叠内容并具有更高的宽度

HTML/CSS 页脚从页面中间开始，然后移动到底部