DIV-naya layout, footer pressed
Many ways of pressing the footer to the lower edge of the window have already been invented and described, it’s worth only to google. But I want to share what I came to myself (I had to invent, because there was no Internet at hand :)) ...
At first I went in the wrong way: the main DIV with content is 100% in height, and the header and footer are absolutely positioned. It looks normal in all browsers, but in IE6 a joint got out - with a dynamic change of content (via javascript) the footer remained in its place, i.e. did not move after the edge of the window. Therefore, I did this: DIV with the main content, a DIV-footer with a negative margin-top, a DIV-header with absolute positioning. An obvious advantage of this method was drawn: the main content of the page in the HTML code is as close as possible to the beginning of the document.
Here are a few comments on the code:
1. I do not know how all this will behave when changing the doctype (there was no time to check)
2. DIV in FF and Opera will be dragged by 100% in height, provided that its parent element has a height of 100% (for this in style there is a line html, body {height: 100%} ), and the height for DIV is set in min-height .
3. Due to the fact that IE6 does not see! Important, we managed to do without hacks :) Thanks to set .
4. For the indents inside these three main DIVs, it is better not to use padding applied to the DIVs themselves, but to invest in each of them for an additional DIVs, and to apply all the necessary indents to it (as I did).
5. In my example, the width is set rigidly (for a non-rubber centralized site). Rubber is also very easy to implement, just remove the width from the DIVs with the class container .
6. I tested it in Opera 9.27, Firefox 3, IE 6, IE 7. Everywhere it works :)
You can see the page template here: e1.nnov.ru/template.html
HTML-code page:
')
UPD: Made some changes to css: now the code without css hacks.
UPD2: slil.ru/25963498 - screenshots of the display of the test page in various browsers (only Opera 9.50+ is ruffling, other browsers display as it should)
At first I went in the wrong way: the main DIV with content is 100% in height, and the header and footer are absolutely positioned. It looks normal in all browsers, but in IE6 a joint got out - with a dynamic change of content (via javascript) the footer remained in its place, i.e. did not move after the edge of the window. Therefore, I did this: DIV with the main content, a DIV-footer with a negative margin-top, a DIV-header with absolute positioning. An obvious advantage of this method was drawn: the main content of the page in the HTML code is as close as possible to the beginning of the document.
Here are a few comments on the code:
1. I do not know how all this will behave when changing the doctype (there was no time to check)
2. DIV in FF and Opera will be dragged by 100% in height, provided that its parent element has a height of 100% (for this in style there is a line html, body {height: 100%} ), and the height for DIV is set in min-height .
3. Due to the fact that IE6 does not see! Important, we managed to do without hacks :) Thanks to set .
4. For the indents inside these three main DIVs, it is better not to use padding applied to the DIVs themselves, but to invest in each of them for an additional DIVs, and to apply all the necessary indents to it (as I did).
5. In my example, the width is set rigidly (for a non-rubber centralized site). Rubber is also very easy to implement, just remove the width from the DIVs with the class container .
6. I tested it in Opera 9.27, Firefox 3, IE 6, IE 7. Everywhere it works :)
You can see the page template here: e1.nnov.ru/template.html
HTML-code page:
<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
New Document
/>
')
UPD: Made some changes to css: now the code without css hacks.
UPD2: slil.ru/25963498 - screenshots of the display of the test page in various browsers (only Opera 9.50+ is ruffling, other browsers display as it should)
Source: https://habr.com/ru/post/28521/
All Articles