代码之家  ›  专栏  ›  技术社区  ›  Gabbykun555

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

footer position web css html
  •  1
  • Gabbykun555  · 技术社区  · 8 年前

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

    • “绝对” , 和 '固定' “相对” 将其放置在最底部,但由于某种原因,它将页脚的宽度截断。(我试图手动调整宽度,但没有成功)。同样的事情 '固定' .

    • 我设置了 和 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>
    7 回复  |  直到 8 年前
        1
  •  1
  •   Mehravish Temkar    8 年前

    在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
  •  1
  •   felixmosh    8 年前

    你有一个 p padding-bottom: 200px; .

    您需要将其删除或更改 p 在一个 footer

        3
  •  0
  •   James Solomon Belda    8 年前

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

    .footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}
.footer p {
   padding-bottom: 0;
}
        4
  •  0
  •   Minar_Mnr    8 年前

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

     <footer class="footer">
        <p style="  bottom: 0px;
      padding-bottom: 0px; ">Here's the footer</p>
    </footer>
        5
  •  0
  •   Fariz Aliyev    8 年前 
    .footer {
   background-color: black;
   height: 100px;
   padding: 0;
   margin: 0;
   position: absolute;
   width: 100%;
   bottom: 0;
}
p {
   padding-bottom: 0px;
}
        6
  •  0
  •   Hiren Vaghasiya    8 年前

    检查底部的页脚 

    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
  •  0
  •   Eng xtian    8 年前

    我使用它,并在您的项目中进行了测试。它正在工作 

    footer{
        position: fixed;
        bottom: 0px;
        width: 100%;
        left: 0px;
        text-align: center;
    }
    推荐文章
    Jamie  ·  在CSS链接的文件名中添加Jinja占位符
    1 年前
    Mass  ·  如何在Tailwind CSS v4中创建配置
    1 年前
    magenta placenta  ·  将css变量合并为一个变量
    1 年前
    ptownbro  ·  重叠分区标签,同时保持以下所有分区和内容就位
    1 年前
    Luke Frost IEng MIMechE  ·  Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示
    1 年前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    1 年前
    john Rizzo  ·  按钮背景颜色、悬停和活动状态存在问题
    1 年前
    Ben Halicki  ·  带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列
    1 年前
    Luckkks  ·  过渡色工作不正常
    1 年前
    ModernEraCaveman  ·  如何对齐我的Bootstrap容器以适应网页的整个宽度?
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号