0

I want to put my footer in bottom page dynamically.

  1. Footer must be fixed in the bottom

  2. If we have more data in the page, footer must be placed lower automatically.

html {
    position: relative;
    min-height: 100%;
}

body {
    padding-top: 60px;
    margin-bottom: 75px;
}

footer {
    position: absolute;
    bottom: 0;
    width: 90%;
    height: 45px;
    line-height: 45px;
}
<div id="container"> 
   <div id="main">
    
   </div> 
   
   <div id="footer">
        <div class="container">
            <span>Place sticky footer content here.</span>
        </div>
   </div> 
</div>
Ivar
  • 6,138
  • 12
  • 49
  • 61
Valentin Valentyn
  • 57
  • 1
  • 10
  • https://stackoverflow.com/questions/15976245/how-to-stick-footer-element-at-the-bottom-of-the-page-html5-and-css3 – justDan Mar 01 '18 at 17:32

1 Answers1

0

I might be a little confused on what you want, you want the page footer to be spaced away from the body text automatically, regardless of how much is added to it?

Try Position: relative.

Absolute positioning will take your footer out of the document flow, so if you have a lot of vertical content, the footer will be placed over it.

This worked for me (assuming I know what you are after):

footer {
    position: relative;
    bottom: 0;
    width: 90%;
    height: 45px;
    line-height: 45px;
    padding-top: 15px;
}

You can add a:

margin: 0

if you want less spacing.

Milo
  • 3,365
  • 9
  • 30
  • 44
Se_7_eN
  • 34
  • 6