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

Question

所以我已经在这个问题上停留了一个多星期了，它快把我逼疯了。我想将页脚放在网页底部。出于某种原因，它只想漂浮在页面中间，就在我最后一个 div 的下方。我做了很多研究并尝试了一百万种不同的方法，其中 none 给了我我需要的结果。

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

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

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

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>

Answer 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; 
}

Answer 2

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

您需要将其删除或更改 footer.

中 p 的样式

Answer 3

工作 fiddle：https://jsfiddle.net/zrbzf22v/

像这样改变你的html：

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

Answer 4

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

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

Answer 5

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

Answer 6

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

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

Answer 7

检查底部的页脚

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>

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

Why won't my footer move to the bottom of the page?

html

css

position

footer

web