1

im trying to make my footer sticky on the bottom of the page (at the end of the page content, even if the content is bigger than the screen) i tried many things, maybe something is conflicting with the code, because it seems to be simple.

here's the basic code im trying:

               <body>
                <div id="main">
                    - a lot of divs and content, pictures, etc -
                <div id="footer1">
                  - footer content -
                </div>
                </div>
                </body>

on css:

             body
                {
              height:100%;
              position:relative;
                }

             #main
                {
              height:100%;
              position:absolute;
                }

             #footer1
                {
              position:absolute;
              width:100%;
              height:150px;
              bottom:0px;
              left:0px;
              background-color:#5B5B5B;
                }

please, note that i already tried removing the div "main", also tried to use: 

                       <footer>

after the body tag instead of div "footer1", nothing works, except if i put the body height manually to a number instead of 100%, like 1200px, then the footer go to position 1200px, dont know why it doesn't recognize the 100%, i also tried:

                     <div style="clear:both"></div>

after the footer div

also, i dont want a fixed screen footer "position:fixed"

Marco Vinicius Castellari
  • 149
  • 12
  • 1
    Possible duplicate of [Problems with CSS sticky footer](https://stackoverflow.com/questions/3906065/problems-with-css-sticky-footer) – showdev Jan 02 '18 at 20:15

2 Answers2

0

Thank you for the answer, the problem is that i was not setting a "min-height:1000px) (the approximate px of my content) now its working fine.

Marco Vinicius Castellari
  • 149
  • 12
-1

The height of your <body> is zero because the height of the parent <html> tag is undefined. Set the height of your the parent to 100% if you want to have the footer positioned absolute rather than fixed to your screen.

html {
  height: 100%;
}
body {
  height: 100%;
  position: relative;
}
#main {
  height: 100%;
  position: absolute;
}

#footer1 {
  position: absolute;
  width: 100%;
  height: 150px;
  bottom: 0px;
  left: 0px;
  background-color: #5B5B5B;
}
<html>
  <body>
    <div id="main">
      - a lot of divs and content, pictures, etc -
      <div id="footer1">
        - footer content -
      </div>
    </div>
  </body>
</html>
doppler
  • 795
  • 5
  • 9