Put footer at buttom without hiding page content when resizing

Question

I want the footer to be stuck at the buttom of the page, the I added: buttom:0px; and made it position:fixed;, but then when I resize window the footer hides other stuff (I want it stay at bottom):

enter image description here

I also tried with position:static; but then it changes the selected height:

enter image description here

here code:

footer {
    font-size: 14px;
    color: gray;
    border-top: 1px solid #2672fb;
    bottom: 0px;
    width: 100%;
    height: 2.5rem;
   position:static;
}
<body>
<div>
...
</div>
<footer>
  <p>Lorem ipsum dolor ...</p>
</footer>
</body>

Does this answer your question? [Bootstrap 3 Flush footer to bottom. not fixed](https://stackoverflow.com/questions/21324395/bootstrap-3-flush-footer-to-bottom-not-fixed) — Roy Bogado, Nov 19 '19 at 07:22

Ahmed Ali · Accepted Answer · 2019-11-19T07:38:01.513

There was a wrapping element that held everything except the footer. It had a negative margin equal to the height of the footer. !-- begin snippet: js hide: false console: true babel: false -->

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;


  /* Equal to height of footer */
  /* But also accounting for potential margin-bottom of last child */
  margin-bottom: -50px;
}
.footer,
.push {
   width:100%;
   height:100px;
}
.footer{
background-color:yellow;}

<!-- language: lang-html -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <body>
    <button id="add">Add Data</button>
      <div class="wrapper">
        <div class="push"> 
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>    
    </div>
      </div>
      <footer class="footer"></footer>
    </body>

Edited can you please take back your down vote if you down voted on my question — Ahmed Ali, Nov 19 '19 at 07:38

Put footer at buttom without hiding page content when resizing

1 Answers1