CODEWITHSUNDEEP
css
Justin
Justin

Reputation: 415

How to can I position a footer so that it is placed at the bottom of a page?

Is there a way to position a footer to the bottom of a page. The footer should not be sticky. The footer should stay in the bottom (literally at the bottom of a web page) of the page and should not be a sticky footer.

This is the code am using now. Is there an alternative way?

    html {
       position:relative; 
       min-height:100%;
   }
   .footer {
       position: absolute;
       left: 0;
       bottom: 0;
       width: 100%;
       background-color: red;
       color: white;
       text-align: center;
    }

Upvotes: 0

Views: 51

Answers (4)

RICHARD ABRAHAM
RICHARD ABRAHAM

Reputation: 2548

Solution using Bootstrap

The footer will always be positioned at the bottom of the page and will neither float nor be sticky.

html, body {
  height: 100%;
}
main {
    min-height: 500px;
}
<html>

    <head>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    </head>

    <body class="d-flex flex-column justify-content-between text-white text-center">

        <header class="p-5 bg-dark">
          <h1>Header</h1>
        </header>
        <main class="p-5 bg-primary">
          <h1>Main</h1>
        </main>
        <main class="p-5 bg-danger">
          <h1>Main2</h1>
        </main>
        <footer class="p-5 bg-warning">
          <h1>Footer</h1>
        </footer>

</html>

Upvotes: 1

shutupchigo
shutupchigo

Reputation: 709

This should give you an idea.

.header {
  background-color: #ccc;
  height: 100px;
  width:100%;
}

.footer {
  position:fixed;
  bottom:0;
  left:0;
  background-color: #eee;
  height: 100px;
  width:100%;
}
<div class="header">
header
</div>
<div class="content">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt nisl non pulvinar consequat. Morbi gravida pellentesque metus et sodales. Pellentesque ac lectus a ligula varius vulputate sit amet at velit. Vivamus magna est, ultricies eget vehicula a, lacinia vel sapien. Vivamus et lorem consequat arcu convallis eleifend. Nullam rutrum neque at nulla lacinia scelerisque. Donec a commodo dolor, eu molestie nunc. Donec neque odio, fringilla sed maximus ut, semper vitae metus. Proin vel sapien vitae leo commodo aliquet ac eu erat. Aliquam non iaculis velit, vitae tincidunt purus. Aliquam erat volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Sed porta augue massa, in laoreet arcu egestas ac. Etiam ornare ac orci et ultrices. Morbi sodales justo ex, tincidunt finibus nisi lobortis vel. Aliquam risus magna, iaculis at libero sit amet, pellentesque laoreet metus. Maecenas vel leo ac risus tincidunt euismod eu in nisl. Sed blandit libero molestie rutrum tempus. Donec molestie justo quis lobortis sollicitudin. Praesent sit amet interdum orci. In hac habitasse platea dictumst. Sed quis elit mi. Sed imperdiet arcu eu ipsum interdum fringilla. Donec eget laoreet augue. Mauris varius augue a odio commodo, ac semper ante gravida. Nulla facilisi. Duis bibendum volutpat lorem, mattis sagittis nunc efficitur sed.

Curabitur finibus erat at lectus tempor, ac aliquet mi venenatis. Cras condimentum lorem consectetur quam rutrum lacinia. Mauris vestibulum finibus diam vel sagittis. Curabitur condimentum gravida velit eu condimentum. Fusce auctor condimentum velit, eu tincidunt risus ultrices et. In eleifend nulla at turpis vulputate laoreet. Nunc non congue quam. Morbi eu laoreet lorem. Morbi vel posuere velit.

Donec vel magna ut ligula rhoncus faucibus nec id augue. Proin sagittis dolor leo, non tempor lacus malesuada et. Pellentesque vehicula faucibus tincidunt. Pellentesque ultrices quam nisi, cursus ultrices turpis maximus vel. Mauris commodo purus sed sem sagittis, non tincidunt diam varius. Nullam consectetur, mi eu placerat blandit, neque neque tristique nibh, at mollis risus sapien vitae odio. Phasellus suscipit orci turpis, at eleifend dui elementum ut. Nulla vestibulum nisl ut felis placerat suscipit. Etiam nibh purus, rutrum sed nisl a, consectetur porta dui. Fusce sit amet massa sed nunc consectetur sollicitudin id eu lorem.

Sed ac augue accumsan, varius felis ac, convallis justo. Nulla id diam iaculis turpis laoreet rutrum. Nullam lorem tortor, malesuada sit amet elit sed, euismod viverra tellus. Nunc tellus mi, aliquam in justo vitae, congue sodales ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur bibendum nibh ex, sit amet commodo odio gravida vel. In nec magna fermentum, dictum mi id, fermentum magna. Pellentesque vestibulum ornare venenatis. Praesent lacinia magna ut elit sodales, vel sagittis nisl interdum. Nunc finibus finibus felis, sed auctor nibh.

</div>
<div class="footer">
footer
</div>

Upvotes: 0

jhrmdk
jhrmdk

Reputation: 642

There is a lot of ways to achieve footer at bottom for example:

#footer { 
     position: fixed; 
     bottom: 0; 
     width: 100%; 
     min-height: 20px; 
   }

Upvotes: 1

user13907403
user13907403

Reputation:

Please try this example.

First add this style to make footer sticky at bottom.

position: fixed;
left: 0;
right:0;
bottom: 0;


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.content{
    height:1000px;
}
.footer {
   position: fixed;
   left: 0;
   right:0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;
}
</style>
</head>
<body>
<div class="content">
  <h2>Fixed/Sticky Footer Example</h2>
  <p>The footer is placed at the bottom of the page.</p>
</div>
<div class="footer">
  <p>Footer</p>
</div>

</body>
</html>

Upvotes: 0

Related Questions