CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Wazy
Wazy

Reputation: 494

footer not staying to bottom of page

I implemented a simple footer with css and bootstrap. It is working as expected on most pages except on pages that do not have a lot of content the footer will appear at the end of the content opposed to the bottom of the page enter image description here

Spent a lot of time trying to figure it out but I just cant get it

.footer {
        position: relative;
        bottom: 0;
        width: 100%;
        height: 150px;
        background:#dfdfdf;
        
    }
.body-tag {            
        height: 100%;
        background: #F6F6F6;
        color: #333333;
        margin-top: 5rem; 
        padding-bottom: 4rem;
    }
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body class="body-tag">
    <div class="footer fixed-bottom">
    <div class="container">
        <footer class="py-3 my-4">
            <ul class="nav justify-content-center border-bottom pb-3 mb-3">
                <li class="nav-item"><a href="#" class="nav-link px-2 footer-text">Home</a></li>
                <li class="nav-item"><a href="#" class="nav-link px-2 footer-text">Features</a></li>
                <li class="nav-item"><a href="#" class="nav-link px-2 footer-text">Pricing</a></li>
                <li class="nav-item"><a href="#" class="nav-link px-2 footer-text">FAQs</a></li>
                <li class="nav-item"><a href="#" class="nav-link px-2 footer-text">About</a></li>
            </ul>
            <p class="text-center footer-text">&copy; name, Inc</p>
        </footer>
    </div>
</div>
</body>

Upvotes: 0

Views: 55

Answers (2)

Amal nandan
Amal nandan

Reputation: 942

There is no problem with the footer Just remove unnecessary margin and padding from body and margin-bottom from footer

As per you diagram there shouldn't be any problem of footer placement, If there is any position value in footer remove it, and also this all should be have single parent.

.footer {
  width: 100%;
  background-color: cyan;
}

.body-tag {
  height: 100%;
  background: #F6F6F6;
  color: #333333;
}

/*Just Demo Purpose*/
nav{
  background-color: cyan;
  height: 60px;
}
main{
height:200vh;}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<body class="body-tag">
  <nav class="">
    <h1 class="text-center">Navbar</h1>
  </nav>
  <main></main>
  <footer class="footer py-3 ">
    <ul class="nav justify-content-center border-bottom pb-3 mb-3">
      <li class="nav-item"><a href="#" class="nav-link px-2 footer-text">Home</a></li>
      <li class="nav-item"><a href="#" class="nav-link px-2 footer-text">Features</a></li>
      <li class="nav-item"><a href="#" class="nav-link px-2 footer-text">Pricing</a></li>
      <li class="nav-item"><a href="#" class="nav-link px-2 footer-text">FAQs</a></li>
      <li class="nav-item"><a href="#" class="nav-link px-2 footer-text">About</a></li>
    </ul>
    <p class="text-center footer-text">&copy; name, Inc</p>
  </footer>
</body>

Upvotes: 1

GucciBananaKing99
GucciBananaKing99

Reputation: 1506

Use position: fixed; for your footer:

Here's an example

* {
  margin: 0;
  padding: 0;
}

footer {
  position: fixed;
  bottom: 0;
}
  <footer>Hey i'm a footer</footer>

Upvotes: 1

Related Questions