CODEWITHSUNDEEP
htmlcss
user10680092
user10680092

Reputation:

Sticky footer overlapping body content?

Trying to get a sticky footer to work but it keeps overlapping the body tag content. I've tried changing the position of the body and the footer in .css but no luck.

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>

Any help would be appreciated! Thanks in advance!

Upvotes: 0

Views: 850

Answers (2)

Renzo Calla
Renzo Calla

Reputation: 7716

Your output its not clear, but if a sticky position is working with your properties as the example

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>

Upvotes: 1

ixhimanshu
ixhimanshu

Reputation: 125

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>

Upvotes: 0

Related Questions