Pin footer to the bottom of the page

Question

css

Good afternoon! And please tell me how you can press the footer to the bottom of the page, provided that the footer should be part of the main block, which is located in the center of the page and there should be indents from the top / bottom of it. I tried this method - it did not help, because there the footer is obtained separately from the main block, and it turns out that the footer, as it were, "falls out". the site in question is http://yarrsk.ru/

upd! thanks to everyone for the answers, but it seems that I solved this problem myself, we define the main block as a table, turn the inner footer block into a row of this table, additionally vertically align to the bottom:

  <div id="wrap">
   <div id="header">...</div>
   <div id="section">...</div>
   <div id="footer">...</div>
  </div>

html, body {height: calc(100% - 16px);}
body {margin: 16px;}
#wrap {display: table; position: relative; height: 100%; min-height: 100% !important;	margin: auto;}
#footer {display: table-row; vertical-align: bottom; position: relative; height: 144px;}

upd2! For some reason, after the footer block was turned into a table row, paddings and margins were no longer applied to it, xs what to do, I decided to just wrap it in another block:

<div id="wrap">
 <div id="header">...</div>
 <div id="section">...</div>
 <div id="footer">
  <div id="footer_section">...</div>
 </div>
</div>

html, body {height: calc(100% - 16px);}
body {margin: 16px;}
#wrap {display: table; position: relative; height: 100%; min-height: 100% !important;	margin: auto;}
#footer {display: table-row; vertical-align: bottom; position: relative; height: 144px;}
#footer_section {display: block; padding: 16px}

Answer 1

html,
      body {
        height: 100%;
      }
      #wrap {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -60px;
      }

      #push,
      #footer {
        height: 60px;
      }

<div id="wrap">
...
      <div id="push"> </div>
</div>
<div id="footer">...</div>

Answer 2

http://getbootstrap.com/examples/sticky-footer/

Answer 3

Recently, for normal browsers, I use the flex model to push the footer to the bottom. At the same time, we stretch the content part as much as possible. Works everywhere.
Link

Answer 4

Try position:fixed

Answer 5

If the footer is a fixed size, say 10em, then you can do this:

<div class="page-content">
  Content!
</div>

<footer class="page-footer">
  I'm the Sticky Footer.
</footer>

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-content {
  min-height: 100%;
  margin-bottom: -10em; 
}
.page-content:after {
  content: "";
  display: block;
}
.page-footer, .page-content:after {
  height: 10em; 
}
.page-footer {
  background: orange;
}

Answer 6

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Answer 7

http://bigspotteddog.github.io/ScrollToFixed/ will probably help

Answer 8

<div class="wrap">
...
  <div class="footer">
    Я футер
  </div>
</div>

html, body {
  min-width: 100%;
}
.wrap {
  min-height: 100%;
  position: relative;
  padding-bottom: 100px;
}
.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
}

Answer 9

...provided that the footer should be part of the main block, which is located in the center of the page and there should be indents above / below it.

The basic rule is that all parent and sibling elements on a page should be percent styled. Unless, of course, you want to do it in CSS without JS. For example, even Habr's footer sticks to the bottom if such rules are written to the page layout with scripts and user styles. There is such a layout that it will be impossible to arrange percentage styles.

In your case, what is centered (horizontally) is not significant. But the header and footer should be 0% height, and the rest of the styles should be inserted into them with the desired non-zero height of the blocks. An example of how this is done with Habr's pages is described here: http://habrahabr.ru/post/151320/ to see how it works - put the script (preferably on Firefox or the old Opera, it worked more reliably there) and go to a short page , for example, this one https://auth.habrahabr.ru/settings/privacy/ (until yesterday QA worked, where there were many short pages). Short articles and other things will work the same way, for example, the article preparation page.

Answer 10

and everything seems to be fine, but here’s the trouble, I don’t know if it’s a bug or a feature - the indent from the bottom of the main block for some reason disappears on some pages and the block sticks to the browser border, the same is observed if you reduce the page size, why is that?