1
所以我一直在這個問題上停留了一個多星期，這讓我瘋狂。我想把我的頁腳放在我的網頁底部。出於某種原因，它只是想浮在頁面中間，就在我最後一個div的下面。我做了大量的研究並嘗試了一百萬種不同的東西，而且他們都沒有給我我需要的結果。爲什麼我的頁腳不能移動到頁面的底部？
這裏有幾個解決辦法的，我試過：
我與position屬性發揮各地，將其設置爲「絕對」，「相對」和「固定'。 'Relative'將頁腳向下推，同時也將其下面的內容向下推。 '絕對'工作在它的最底部，但由於某種原因它削減了頁腳的寬度。 （我嘗試手動調整寬度，但沒有運氣）。與'固定'同樣的事情。
我設置頁邊距和體和 HTML內容的填充0。
予設定的主體的高度爲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; \t
}
.container {
\t min-height: 100%; \t
}
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 {
\t background-color: gainsboro;
\t color: black;
}
.links {
text-align: center;
letter-spacing: 15px;
}
.youtube {
position: relative;
bottom: -3px;
}
.dailymotion {
position: relative;
top: -1px;
}
/* html, body {
\t height: 100%;
\t padding: 0;
\t margin: 0; \t
} */
.footer {
\t background-color: black;
\t height: 100px;
\t padding: 0;
\t margin: 0; \t
}<!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">
\t \t <h1>iHeartFandomz</h1>
\t \t <h2>Fandoms Collection</h2>
\t </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">
\t <p>Here's the footer</p>
</footer>
</body>
</html>
除了這裏的一對CSS技巧一些更多的信息：[置頂頁腳，五種方式（https：//開頭的CSS -tricks.com/couple-takes-sticky-footer/）。 – insertusernamehere