试图让一个粘性页脚工作,但它一直与正文标记内容重叠。我尝试过在.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>