How to allow short pages of content to reach the bottom of the browser window, and then a footer should appear

Question

In this case, I developed CSS code for this web application .. and sometimes the resulting data is too small, and the site footer is displayed in the middle of the page and looks weird.

I would like to press the space bar at the bottom of the browser, and then the footer. And if the page is long, this text will not overlap with the footer.

Can someone help me with this code right here?

I tried to use some of the codes that I found on this page: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page , which talks about almost the same question, but I can not do it completely:
What am I doing wrong?

@charset "utf-8"; body { margin: 0; padding: 0; text-align: center; height:100%; position: relative; height:100%; /* needed for container min-height */ } .spacer { clear: both; height: 0; margin: 0; padding: 0; font-size: 0.1em; } .spacer_left { clear: left; margin: 0 0 10px 0; padding: 0; font-size: 0.1em; } hr { height: 1px; margin: 20px 0 20px 0; border: 0; color: #ccc; background: #ccc; } #container { position:relative; /* needed for footer positioning*/ height:auto !important; /* real browsers */ height:100%; /* IE6: treaded as min-height*/ min-height:100%; /* real browsers */ width: 1160px; /* width of the site ! */ margin: 0 auto; padding: 0; border: 1px solid #333; text-align: left; } /* Context Bar */ h1#contexto { background:url('../images/menubarbg2.png'); width:1160px; height:30px; position:relative; margin-top:10px; visibility: inherit; font-family:Arial, Helvetica, sans-serif; font-size:12px; } #header { margin: 0; padding: 5px; height:70px; } h1#titulo { margin: 0; padding: 0 0 0; } #content { margin: -15px 20px 0 20px; /*padding: -6px 5px 20px 5px;*/ padding:1em 1em 5em; /* bottom padding for footer */ } div#content.columns { margin-left: 100px; } #content abbr, #content acronym { cursor: help; border-bottom: 1px dotted; } #content ul { list-style-type: square; } #content ul li, #content ol li { margin: 0 0 0.4em 0; padding: 0; } #content blockquote { width: 75%; margin: 0 auto; padding: 20px; } #footer { margin: 0; height: -30px; padding: 5px; clear: both; bottom:0; position:relative; } 

UPDATE: SOLUTION

 @charset "utf-8"; body, html { margin: 0; padding: 0; text-align: center; position: relative; height:100%; /* needed for footer positioning*/ } .spacer { clear: both; height: 0; margin: 0; padding: 0; font-size: 0.1em; } .spacer_left { clear: left; margin: 0 0 10px 0; padding: 0; font-size: 0.1em; } hr { height: 1px; margin: 20px 0 20px 0; border: 0; color: #ccc; background: #ccc; } #container { position:relative; /* needed for footer positioning*/ min-height: 100%;/* needed for footer positioning*/ height: auto !important;/* needed for footer positioning*/ height: 100%;/* needed for footer positioning*/ margin: 0 auto -30px;/* needed for footer positioning*/ width: 1160px; padding: 0; border: 1px solid #333; text-align: left; } #header { margin: 0; padding: 5px; height:70px; } h1#titulo { margin: 0; padding: 0 0 0; } h1#contexto { background:url('../images/menubarbg2.png'); width:1160px; height:30px; position:relative; margin-top:10px; visibility: inherit; font-family:Arial, Helvetica, sans-serif; font-size:12px; } #content { margin: -15px 20px 30px 20px; /* needed for footer positioning*/ } div#content.columns { margin-left: 100px; } #content abbr, #content acronym { cursor: help; border-bottom: 1px dotted; } #content ul { list-style-type: square; } #content ul li, #content ol li { margin: 0 0 0.4em 0; padding: 0; } #content blockquote { width: 75%; margin: 0 auto; padding: 20px; } #footer, .push /* needed for footer positioning*/ { padding: 5px; clear: both; position:absolute;/* needed for footer positioning*/ bottom:0;/* needed for footer positioning*/ height: -30px;/* needed for footer positioning*/ width:1150px; } 

Answer 1

You can get a “sticky footer” by having a body height equal to the height of your browser window (that is: setting the height to 100%), and then forcing the footer to be at the bottom of any height of your browser window there.

CSS

 body { height: 100%; position: relative; } #footer { position:absolute; bottom:0; height:60px; background:#ccc; } 

HTML:

 <html><body> text here text here <div id="footer"> Im in the footer and bottom of the page! </div> </body></html>