Question

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

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

我玩了位置属性，将其设置为'绝对'，'相对'和'固定'。 '相对'将页脚向下推，但也将其下方的内容推下来。 '绝对'将它定位在最底部，但由于某种原因，它会切断页脚的宽度。（我试着手动调整宽度，但没有运气）。与'固定'相同。
我将 body 和 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;	
}

.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 Change

中

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;。

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

Answer 3

工作小提琴：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

检查底部的页脚

＆＃13;

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

＆＃13;

<!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>

＆＃13;

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

7 个答案: