Footer pressed to the bottom of the page

Pressing the footer to the bottom of the page, I think a good tone. After reviewing a lot of solutions, I found that all of them are based on any hacks and require that a bunch of garbage be inserted into the code. I propose a simple solution based on JavaScript, which does not require any additional elements and works stably in all browsers.

All you need is to connect a special script and assign the ndra-container class to the element to be stretched. Done!

See an example
')


A page with a pressed basement should look something like this:

< html > < body > < div > </ div > < div class ='ndra-container' > </ div > < div > </ div > </ body > </ html > * This source code was highlighted with Source Code Highlighter .

1. < html > < body > < div > </ div > < div class ='ndra-container' > </ div > < div > </ div > </ body > </ html > * This source code was highlighted with Source Code Highlighter .
2. < html > < body > < div > </ div > < div class ='ndra-container' > </ div > < div > </ div > </ body > </ html > * This source code was highlighted with Source Code Highlighter .
3. < html > < body > < div > </ div > < div class ='ndra-container' > </ div > < div > </ div > </ body > </ html > * This source code was highlighted with Source Code Highlighter .
4. < html > < body > < div > </ div > < div class ='ndra-container' > </ div > < div > </ div > </ body > </ html > * This source code was highlighted with Source Code Highlighter .
5. < html > < body > < div > </ div > < div class ='ndra-container' > </ div > < div > </ div > </ body > </ html > * This source code was highlighted with Source Code Highlighter .
6. < html > < body > < div > </ div > < div class ='ndra-container' > </ div > < div > </ div > </ body > </ html > * This source code was highlighted with Source Code Highlighter .
7. < html > < body > < div > </ div > < div class ='ndra-container' > </ div > < div > </ div > </ body > </ html > * This source code was highlighted with Source Code Highlighter .

< html > < body > < div > </ div > < div class ='ndra-container' > </ div > < div > </ div > </ body > </ html > * This source code was highlighted with Source Code Highlighter .

The script will stretch the content block so that the footer rests on the bottom of the page. The script checks the height of the block every second and responds quickly to resizing the window. Works in all browsers. Use :) Here is the code for the script itself:

1. $ ( function () {
3. $ ( "body" ) .css ({padding: 0, margin: 0});
4. var f = function () {
5. $ ( ".ndra-container" ) .css ({position: "relative" });
6. var h1 = $ ( "body" ) .height ();
7. var h2 = $ (window) .height ();
8. var d = h2 - h1;
9. var h = $ ( ".ndra-container" ) .height () + d;
10. var ruler = $ ( "<div>" ) .appendTo ( ".ndra-container" );
11. h = Math.max (ruler.position (). top, h);
12. ruler.remove ();
13. $ ( ".ndra-container" ) .height (h);
14. };
15. setInterval (f, 1000);
16. $ (window) .resize (f);
17. f ();
19. });

* This source code was highlighted with Source Code Highlighter .