粘贴页脚重叠正文内容

  • 本文关键字:正文 重叠 html css
  • 更新时间 :
  • 英文 :


试图让一个粘性页脚工作,但它一直与正文标记内容重叠。我尝试过在.css中更改正文和页脚的位置,但没有成功。

CSS

body
{
background-color: #7f7f7f;
color:white;
font-family: "courier New", Perpetua Titling MT;
position:relative ;
}
footer
{
background-color: #7f7f7f;
color:white;
font-family: "courier New", Perpetua Titling MT;
font-size: 1em;
margin-top:auto; 
overflow:hidden;
bottom: 0;
left: 0;
position: fixed;
right: 0;
}

HTML

<footer>
<nav>
<ul class = "footer">           
<li><a href = "gallery.html">Gallery</a></li>
<li><a href = "about.html">About Us</a></li>
<li><a href = "contact.html">Contact Us</a></li>
<li><a href = "sitemap.html">Sitemap</a></li>
</ul>
</nav>  
</footer>

任何帮助都将不胜感激!提前感谢!

您的输出不清楚,但如果粘性位置正在使用您的属性作为示例

body
{
background-color: #7f7f7f;
color:white;
font-family: "courier New", Perpetua Titling MT;
position:relative ;
height: 1000px;
}
footer
{
background-color: red;
color:white;
font-family: "courier New", Perpetua Titling MT;
font-size: 1em;
margin-top:auto; 
overflow:hidden;
bottom: 0;
left: 0;
position: fixed;
right: 0;
}
<body>
<footer>
<nav>
<ul class = "footer">           
<li><a href = "gallery.html">Gallery</a></li>
<li><a href = "about.html">About Us</a></li>
<li><a href = "contact.html">Contact Us</a></li>
<li><a href = "sitemap.html">Sitemap</a></li>
</ul>
</nav>  
</footer>
</body>

body
{
background-color: #7f7f7f;
color:white;
font-family: "courier New", Perpetua Titling MT;
position:relative ;
margin-bottom:100px;
}
footer
{
background-color: #444;
color:white;
font-family: "courier New", Perpetua Titling MT;
font-size: 1em;
overflow:hidden;
bottom: 0;
left: 0;
height:100px;
position: fixed;
right: 0;
}
<body>
<h1> i m body </h1>
</body>
<footer>
<p>All rights reserved 2018 </p>
</footer>

最新更新