Question

试图使页脚变粘，但它会不断重叠body标签内容。我尝试更改.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>

任何帮助将不胜感激！预先感谢！

Answer 1

您的输出不清楚，但是如果粘性位置正与您的属性一起工作，例如

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>

Answer 2

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>

粘页脚重叠身体内容？

2 个答案: