Another nailed footer. Variable height, block layout, JS optional
The task of nailing the footer to the bottom of the page is obmusoleen from head to foot. It is well solved for a fixed-height footer. But for the case when the height of the footer depends on its content, there are not many methods. Either this is an obvious javascript solution . Either the fit for this element is not originally intended. I, of course, about the tables . I want to suggest a method that also has its drawbacks (everything below), but these are other drawbacks, and, therefore, can suit those who are not suitable for the first two.
For a starting point, you need a way to nail a fixed footer. The method of stretching one element by 100%, and then biting a margin from him below, equal to the height of the footer, will not work, because marjing is set once and cannot change dynamically. Therefore, the blank will be the method of stretching the body to 100% and specifying its position: relative. The footer is absolutely positioned here, so it “sticks” to the edges of the body. Crawling onto the text does not give him additional indenting of the content (in this case, this is the section element, but this is not important).
In this example, you can remove from the footer an explicit indication of the size, cram text into it and get a variable-height footer nailed to the bottom without JS and on block elements . But, if everything was so simple, there would be no article. Such a footer closes the content, because its height changes, and there is no indent from the bottom edge of the content.
')
And here comes the second footer to the rescue! The second footer is needed in order to push the lower border of the window under the content so that the first footer can fit there. To do this, he must have exactly the same styles as the first (except those added specifically for him), and must completely duplicate the content of the first footer. But at the same time show it to the user is not necessary.
Thus, the task is completed . But the disadvantages of the method are obvious: the proliferation of html code, a bad effect on seo, you need to take care that the content is the same in both blocks. Therefore, I propose another modification: you need to duplicate the footer not on the server, but on the client using javascript. The principal difference from the javascript method above is that for this method, javascript is needed only during page load. There are no calculations on it and he does not consider dimensions.
The final version .
Unfortunately, in the process of preparing the final version, it turned out that ie6 does not clone the contents of tags that it does not know, so $ ('footer'). Clone () does not work in it. I had to replace the tag with a div.
For a starting point, you need a way to nail a fixed footer. The method of stretching one element by 100%, and then biting a margin from him below, equal to the height of the footer, will not work, because marjing is set once and cannot change dynamically. Therefore, the blank will be the method of stretching the body to 100% and specifying its position: relative. The footer is absolutely positioned here, so it “sticks” to the edges of the body. Crawling onto the text does not give him additional indenting of the content (in this case, this is the section element, but this is not important).
In this example, you can remove from the footer an explicit indication of the size, cram text into it and get a variable-height footer nailed to the bottom without JS and on block elements . But, if everything was so simple, there would be no article. Such a footer closes the content, because its height changes, and there is no indent from the bottom edge of the content.
')
And here comes the second footer to the rescue! The second footer is needed in order to push the lower border of the window under the content so that the first footer can fit there. To do this, he must have exactly the same styles as the first (except those added specifically for him), and must completely duplicate the content of the first footer. But at the same time show it to the user is not necessary.
Thus, the task is completed . But the disadvantages of the method are obvious: the proliferation of html code, a bad effect on seo, you need to take care that the content is the same in both blocks. Therefore, I propose another modification: you need to duplicate the footer not on the server, but on the client using javascript. The principal difference from the javascript method above is that for this method, javascript is needed only during page load. There are no calculations on it and he does not consider dimensions.
The final version .
Unfortunately, in the process of preparing the final version, it turned out that ie6 does not clone the contents of tags that it does not know, so $ ('footer'). Clone () does not work in it. I had to replace the tag with a div.
Source: https://habr.com/ru/post/96515/
All Articles