- Tutorial
Anyone who is accustomed to fully-fledged website pages prefers the look of "nailed" (sticky, sticky) to the bottom of the page footer. But there are two troubles on the Internet: input fields that do not grow downwards and footers that are not nailed down (to the bottom of the window). For example, when we open pages of a type that are short in height, it is immediately striking that the information designed to be at the bottom of the viewport sticks to the content and is somewhere in the middle, or even at the top of the window, when it is empty at the bottom.
So, instead of.
This guide for novice layout designers will show you how to make a "nailed" footer in 45 minutes, correcting the flaws of even such a respected publication as Habr, and compete with it as a fulfillment of your promising project.
Let's look at the implementation of one kind of nailed footer taken from the network and try to figure out what is happening. css-tricks.com/snippets/css/sticky-footer
CSS:
* (margin: 0; padding: 0;) html, body, #wrap (height: 100%;) body> #wrap (height: auto; min-height: 100%;) #main (padding-bottom: 150px; ) / * must be same height as the footer * / #footer (position: relative; margin-top: -150px; / * negative value of footer height * / height: 150px; clear: both;) / * CLEAR FIX * / .clearfix: after (content: "."; display: block; height: 0; clear: both; visibility: hidden;) .clearfix (display: inline-block;) / * Hides from IE-mac \ * / * html .clearfix (height: 1%;) .clearfix (display: block;) / * End hide from IE-mac * /
HTML:
Let's start with theory
The usual implementation of a nailed footer relies on the CSS2-unique property that elements are immediate descendants. BODY- maintain percentage height ( height: 100% or another) relative to the window, if all their parents have the same percentage height starting from the tag Html... Previously, without doctypes, but now in Quirks Mode, percentage heights of elements are supported at any level, and in modern doctypes - only within percentage specified elements. Therefore, if we make a content block (let's call it #layout) having 100% height, it will scroll as if it were a window. All (streaming) content is placed in it, except for the footer and maybe the header.A footer is placed next to this block and given 0 pixels of height. In general, you can follow #layout put as many blocks as you like, but all of them must be either from 0 pixels in height, or outside the flow of the document (not position: static). And there is another important trick that is usually used. It is not necessary to make the height equal to 0. You can make the height fixed, but subtract it from the main block using the property margin-bottom: - (height);.
In human terms, styles make an empty "pocket" at the bottom, into which the footer is inserted, and it always turns out to be either sticky to the bottom border of the window, or to the bottom border of the document if the document is higher in height than the window height. There are many implementations of footer on the internet, with varying success in all browsers. Let's continue building it ourselves, using Habr's layout as a "workhorse".
Since the bottom of the block #layout- this is a pocket, for the footer it should be empty, not displaying the page objects. And here we come across one more limitation - we cannot make an empty pocket at the expense of padding v #layout, because then it will become more than 100%. Will not save and margin- emptiness needs to be done at the expense of the properties of nested elements. In addition to everything, it is necessary to ensure that it does not get out under the border of the block of floating elements, which is done, for example, by a block
Let's look at the structure of the pages of our experimental. The easiest way to do this is to open the Firebug window or similar window ("Developer Tools" (Ctrl-F12)) in Chrome.
Let's move on to a working example
What we see layout flaws in terms of implementing the effect of a nailed footer? We see that1) the footer on the site is inside a block with id = layout, which has no percentage height. In theory, he, the parents, and the content-left block need to be set to 100% height. With the latter, problems arise - it is not suitable for this. Consequently, one interlayer block is missing or the footer is on the wrong level. Moreover,
2) the height of the footer is variable (it depends on the number of elements in the list and on the font size, this can be seen not from HTML, but from CSS). AND
3) above #layout there is an ad unit with a fixed height of 90px;
4) there are no alignment boxes in the footer or (generally speaking) in the box #layout(yes, but above the block .rotated_posts; however, perhaps it should be attributed to the footer).
Point 4 - you will have to draw with a script.
It would seem simple to figure out the third point by adding #layout (margin-top: -90px;) But remember that this block may not exist - it is suppressed by a banner cutter, or advertisers will suddenly decide not to show it. There are a number of pages on the site where it is not. Therefore addiction margin-top from an ad unit is a bad idea. Much better is to place it inside #layout- then he will not interfere with anything.
The first point is that in order for the nailed footer to work at all, you need to place the footer block under #layout... However, using javascript, you can implement other schemes of the nailed footer, but in any case, you need JS or the initially correct layout to do without it.
Since we cannot be stronger than the very last site designer, who "stuck" the footer inside the content, we will postpone the idea of the correct placement of the footer on our future site (which, therefore, will be "cooler" Habr!), And dissect Habr with javascript (user script) to the correct states. (Let's say right away that it is not the layout designer or the switchman who is to blame, but the type of the site, of course, determines the strategic decision of the project management.) This way we will not reach the ideal, because in the first second or two during the loading process, the page will be with the wrong layout. But the concept and the ability to surpass the most popular site in the IT world are important for us.
Therefore, in the right place in the script (early, at the end of the page load), we will write the transfer of the DOM ad and footer blocks to the required places. (Let's get ready for the fact that due to user scripts, the solution will be more complicated than a clean one.)
var dQ = function (q) (return document.querySelector (q);) // for short var topL = dQ ("# topline"), lay = dQ ("# layout"), foot = dQ ("# footer" ); if (topL && lay) // banner - inside the content block lay.insertBefore (topL, lay.firstChild); if (lay && foot && lay.nextSibling) // wrapping the footer lay.parentNode.insertBefore (footer, lay.nextSibling);
We put the blocks in their places - now it remains to assign the necessary properties to the elements. The height of the footer will have to be set exactly, simply because we already know it by the time the user script is in effect (the end of the page load). Due to the trigger point of the user script, as mentioned above, a jump in the display of the footer on the page is inevitable. Can you try to make a "good face" but with a "bad game"? What for? "Bad game" of the site allows you to create a concept without super-efforts, which will be enough to assess the quality and will not be needed if you "play correctly" on your project.
if (foot) (// block aligner
Here we allowed ourselves to use a self-written function h.apnd_el which does roughly the same thing as in jQuery -
$("") .css ((height: footH || 0)). appendTo ($ (footer))
And then there is another typical CSS rule injection function - h.addRules... You can't do without it here, because you need to declare a rule with " ! important"- just because of the peculiarities of the style priorities from the user script.
With these pieces of code, we will be able to see the nailed footer in the user script (after jumping it down) and fully understand how to build the page layout. It is unpleasant to use the bouncing design on a daily basis, so it is recommended to do it solely for demonstration and testing. In the HabrAjax user script, I installed a similar script, closing it with the "underFooter" setting (check the box in the list of settings before the "nailed footer"), starting from version 0.883_2012-09-12.
Does the nailed footer affect the need to update the ZenComment styles if installed? Yes, it does. Due to the complex chain of style priorities, in which the styles inserted by the user script have the lowest priority, I had to slightly adjust the user styles for opportunities work with a nailed footer. If you do not update the userstyles (up to 2.66_2012-09-12 +), the footer will not work accurately.
Block rotated_post (three popular posts from the past) looks more logical in the footer, so in a real script it is also moved to the footer.
The second point (from the list of imperfections in the layout) - reasoning purely for Habr (they do not apply to user script and partially repeat the previous ones).
Pages have a problem preventing them from making a nailed footer in pure CSS - an undefined footer height based on the browser's default font sizes. To implement a footer in CSS, you need to choose the relative heights of the fonts, but they may not work if the provided fonts are not available on the user's computer. Therefore, the solution should include a javascript that can fit transitions to the approximate position of the footer to the exact one. Or, having looked at the acceptability of the solution made in user script on different platforms, make a calculated installation of the nailed footer - the first observations show that the solution is practical.
Conclusion: you can fully arrange the layout on Habré, but for this you need a layout designer who clearly understands the behavior of the layout and places the blocks in the correct order. (Now the footer and the top banner are "in the wrong place" and not so that just styles to get a nailed footer.) You can do without JS if you set the height of the footer in relative units, taking some margin for font uncertainty.
Implementation
If you enable HabrAjax 0.883+, we will see the work of the "nailed footer". It adapts in height using scripts. It allows you to evaluate how much better the pages with the nailed footer look compared to the regular ones. ZenComment userstyles are compatible with scripts, but for the nailed footer to work correctly, you need to install ZenComment 2.66_2012-09-12 + version with them.Implementation Behavior Facts
Shamanism with footer, styles and scripts is shamanism (only to be supported by theory). The behavior is slightly different in different browsers, but in some places it is unexpected. Without user scripts and block rearrangements, the results will be different. This is what the experiments with the implementation in the user script gave.1) Firefox - unexpected lack of footer jumping. It's strange that they are not there - rendering occurs after placing the footer at the bottom.
2) Chrome - he surprised with a "wandering scroll" - empty spaces at the bottom are added to the page with a period of once a second - something wrong is happening with the calculation of heights. It is treated by writing html, body (height: 100%) in the userstyle, but without guarantees that it will always work. It is safer to check if the document does not exceed the height of the window, and if not, then move the footer, otherwise nothing. With jumping - everything is in order, it is.
3) Opera - no jumps (v. 12.02) on first page load, but a hasty reload may show a footer jump. Otherwise, it leads no less correctly than Fx.
Well, you will have to specially teach Chrome to behave correctly (with a script) and in this form roll out the version for review. Therefore, the site in the user script is a little more complicated than the one given in the article.
It should be recalled that this is not a full-fledged implementation - it does not take into account, for example, cases of window resizing by the user. You can also find rare (in practice) combinations of changing footer heights before and after moving, where the logic will start to malfunction without leading to inconvenience. The disadvantages were deliberately left, because the balance of the complexity of the revision and the timeliness of the solution is observed.
As a result, it turned out to be quite workable scheme of work, at least for fast stationary computers. If incorrect footer behavior is found, the "underFooter" setting should be disabled.
What pages is this useful for?
On a standard site, without user styles, even short Q&A pages turn out to be longer than 1500px, which in most cases is invisible with horizontal monitors. But even with ordinary monitors, users' personal pages with a height of about 1300 pixels often come across, where an unbroken footer appears in all its glory. A number of pages in the user settings are also not very long.If you use ZenComment user styles, they greatly reduce the required page height, and the HabrAjax user script may not show some or all of the sidebars in the sidebar. Therefore, with scripts and styles, the effect of an unset footer is noticeably more often observed. Therefore, it is logical that the footer fix appeared for the first time in HabrAjax. But even a normal site has a number of pages where a nailed footer would be useful.
Will there be support?
The behavior of the site over the past year shows that the developers (and therefore the management) have begun to implement features that previously existed only in user scripts and user styles. For example, at the beginning of the year I wrote, where I collected many small wishes. Six months later, I returned to it and noted with satisfaction (right in the text; you can see the "UPD" and the dates) that a number of features described as wishes had already been implemented into the site.
Next, let's look at the “arrows” instead of the boxes for evaluating comments. They appeared in the users ("Prettifier") about 3 years ago and were taken over in ZenComment about 2 years ago. About 2-3 months ago, they appeared on the site. Begins to believe that after a while the arrows will spread some distance, as it is done in ZenComment (one arrow to the left of the number, the second to the right), in order to miss less.
- Tutorial
Anyone who is accustomed to fully-fledged website pages prefers the look of "nailed" (sticky, sticky) to the bottom of the page footer. But there are two troubles on the Internet: input fields that do not grow downwards and footers that are not nailed down (to the bottom of the window). For example, when we open short-height pages like habrahabr.ru/settings/social, it is immediately striking that the information designed to be at the bottom of the viewport sticks to the content and is somewhere in the middle, or even at the top of the window when below it is empty.
So, instead of.
This guide for novice layout designers will show you how to make a "nailed" footer in 45 minutes, correcting the flaws of even such a respected publication as Habr, and compete with it as a fulfillment of your promising project.
Let's look at the implementation of one kind of nailed footer taken from the network and try to figure out what is happening. css-tricks.com/snippets/css/sticky-footer
CSS:
* (margin: 0; padding: 0;) html, body, #wrap (height: 100%;) body> #wrap (height: auto; min-height: 100%;) #main (padding-bottom: 150px; ) / * must be same height as the footer * / #footer (position: relative; margin-top: -150px; / * negative value of footer height * / height: 150px; clear: both;) / * CLEAR FIX * / .clearfix: after (content: "."; display: block; height: 0; clear: both; visibility: hidden;) .clearfix (display: inline-block;) / * Hides from IE-mac \ * / * html .clearfix (height: 1%;) .clearfix (display: block;) / * End hide from IE-mac * /
HTML:
Let's start with theory
The usual implementation of a nailed footer relies on the CSS2-unique property that elements are immediate descendants. BODY- maintain percentage height ( height: 100% or another) relative to the window, if all their parents have the same percentage height starting from the tag Html... Previously, without doctypes, but now in Quirks Mode, percentage heights of elements are supported at any level, and in modern doctypes - only within percentage specified elements. Therefore, if we make a content block (let's call it #layout) having 100% height, it will scroll as if it were a window. All (streaming) content is placed in it, except for the footer and maybe the header.A footer is placed next to this block and given 0 pixels of height. In general, you can follow #layout put as many blocks as you like, but all of them must be either from 0 pixels in height, or outside the flow of the document (not position: static). And there is another important trick that is usually used. It is not necessary to make the height equal to 0. You can make the height fixed, but subtract it from the main block using the property margin-bottom: - (height);.
In human terms, styles make an empty "pocket" at the bottom, into which the footer is inserted, and it always turns out to be either sticky to the bottom border of the window, or to the bottom border of the document if the document is higher in height than the window height. There are many footer implementations on the Internet and on Habré, with varying success in all browsers. Let's continue building it ourselves, using Habr's layout as a "workhorse".
Since the bottom of the block #layout- this is a pocket, for the footer it should be empty, not displaying the page objects. And here we come across one more limitation - we cannot make an empty pocket at the expense of padding v #layout, because then it will become more than 100%. Will not save and margin- emptiness needs to be done at the expense of the properties of nested elements. In addition to everything, it is necessary to ensure that it does not get out under the border of the block of floating elements, which is done, for example, by a block
Let's look at the structure of the pages of our experimental. The easiest way to do this is to open the Firebug window or similar window ("Developer Tools" (Ctrl-F12)) in Chrome.
Let's move on to a working example
What we see layout flaws in terms of implementing the effect of a nailed footer? We see that1) the footer on the site is inside a block with id = layout, which has no percentage height. In theory, he, the parents, and the content-left block need to be set to 100% height. With the latter, problems arise - it is not suitable for this. Consequently, one interlayer block is missing or the footer is on the wrong level. Moreover,
2) the height of the footer is variable (it depends on the number of elements in the list and on the font size, this can be seen not from HTML, but from CSS). AND
3) above #layout there is an ad unit with a fixed height of 90px;
4) there are no alignment boxes in the footer or (generally speaking) in the box #layout(yes, but above the block .rotated_posts; however, perhaps it should be attributed to the footer).
Point 4 - you will have to draw with a script.
It would seem simple to figure out the third point by adding #layout (margin-top: -90px;) But remember that this block may not exist - it is suppressed by a banner cutter, or advertisers will suddenly decide not to show it. There are a number of pages on the site where it is not. Therefore addiction margin-top from an ad unit is a bad idea. Much better is to place it inside #layout- then he will not interfere with anything.
The first point is that in order for the nailed footer to work at all, you need to place the footer block under #layout... However, using javascript, you can implement other schemes of the nailed footer, but in any case, you need JS or the initially correct layout to do without it.
Since we cannot be stronger than the very last site designer, who "stuck" the footer inside the content, we will postpone the idea of the correct placement of the footer on our future site (which, therefore, will be "cooler" Habr!), And dissect Habr with javascript (user script) to the correct states. (Let's say right away that it is not the layout designer or the switchman who is to blame, but the type of the site, of course, determines the strategic decision of the project management.) This way we will not reach the ideal, because in the first second or two during the loading process, the page will be with the wrong layout. But the concept and the ability to surpass the most popular site in the IT world are important for us.
Therefore, in the right place in the script (early, at the end of the page load), we will write the transfer of the DOM ad and footer blocks to the required places. (Let's get ready for the fact that due to user scripts, the solution will be more complicated than a clean one.)
var dQ = function (q) (return document.querySelector (q);) // for short var topL = dQ ("# topline"), lay = dQ ("# layout"), foot = dQ ("# footer" ); if (topL && lay) // banner - inside the content block lay.insertBefore (topL, lay.firstChild); if (lay && foot && lay.nextSibling) // wrapping the footer lay.parentNode.insertBefore (footer, lay.nextSibling);
We put the blocks in their places - now it remains to assign the necessary properties to the elements. The height of the footer will have to be set exactly, simply because we already know it by the time the user script is in effect (the end of the page load). Due to the trigger point of the user script, as mentioned above, a jump in the display of the footer on the page is inevitable. Can you try to make a "good face" but with a "bad game"? What for? "Bad game" of the site allows you to create a concept without super-efforts, which will be enough to assess the quality and will not be needed if you "play correctly" on your project.
if (foot) (// block aligner
Here we allowed ourselves to use a self-written function h.apnd_el which does roughly the same thing as in jQuery -
$("") .css ((height: footH || 0)). appendTo ($ (footer))
And then there is another typical CSS rule injection function - h.addRules... You can't do without it here, because you need to declare a rule with " ! important"- just because of the peculiarities of the style priorities from the user script.
With these pieces of code, we will be able to see the nailed footer in the user script (after jumping it down) and fully understand how to build the page layout. It is unpleasant to use the bouncing design on a daily basis, so it is recommended to do it solely for demonstration and testing. In the HabrAjax user script, I installed a similar script, closing it with the "underFooter" setting (check the box in the list of settings before the "nailed footer"), starting from version 0.883_2012-09-12.
Does the nailed footer affect the need to update the ZenComment styles if installed? Yes, it does. Due to the complex chain of style priorities, in which the styles inserted by the user script have the lowest priority, I had to slightly adjust the user styles for opportunities work with a nailed footer. If you do not update the userstyles (up to 2.66_2012-09-12 +), the footer will not work accurately.
Block rotated_post (three popular posts from the past) looks more logical in the footer, so in a real script it is also moved to the footer.
The second point (from the list of imperfections in the layout) - reasoning purely for Habr (they do not apply to user script and partially repeat the previous ones).
Pages have a problem preventing them from making a nailed footer in pure CSS - an undefined footer height based on the browser's default font sizes. To implement a footer in CSS, you need to choose the relative heights of the fonts, but they may not work if the provided fonts are not available on the user's computer. Therefore, the solution should include a javascript that can fit transitions to the approximate position of the footer to the exact one. Or, having looked at the acceptability of the solution made in user script on different platforms, make a calculated installation of the nailed footer - the first observations show that the solution is practical.
Conclusion: you can fully arrange the layout on Habré, but for this you need a layout designer who clearly understands the behavior of the layout and places the blocks in the correct order. (Now the footer and the top banner are "in the wrong place" and not so that just styles to get a nailed footer.) You can do without JS if you set the height of the footer in relative units, taking some margin for font uncertainty.
Implementation
If you enable HabrAjax 0.883+, we will see the work of the "nailed footer". It adapts in height using scripts. It allows you to evaluate how much better the pages with the nailed footer look compared to the regular ones. ZenComment userstyles are compatible with scripts, but for the nailed footer to work correctly, you need to install ZenComment 2.66_2012-09-12 + version with them.Implementation Behavior Facts
Shamanism with footer, styles and scripts is shamanism (only to be supported by theory). The behavior is slightly different in different browsers, but in some places it is unexpected. Without user scripts and block rearrangements, the results will be different. This is what the experiments with the implementation in the user script gave.1) Firefox - unexpected lack of footer jumping. It's strange that they are not there - rendering occurs after placing the footer at the bottom.
2) Chrome - he surprised with a "wandering scroll" - empty spaces at the bottom are added to the page with a period of once a second - something wrong is happening with the calculation of heights. It is treated by writing html, body (height: 100%) in the userstyle, but without guarantees that it will always work. It is safer to check if the document does not exceed the height of the window, and if not, then move the footer, otherwise nothing. With jumping - everything is in order, it is.
3) Opera - no jumps (v. 12.02) on first page load, but a hasty reload may show a footer jump. Otherwise, it leads no less correctly than Fx.
Well, you will have to specially teach Chrome to behave correctly (with a script) and in this form roll out the version for review. Therefore, the site in the user script is a little more complicated than the one given in the article.
It should be recalled that this is not a full-fledged implementation - it does not take into account, for example, cases of window resizing by the user. You can also find rare (in practice) combinations of changing footer heights before and after moving, where the logic will start to malfunction without leading to inconvenience. The disadvantages were deliberately left, because the balance of the complexity of the revision and the timeliness of the solution is observed.
As a result, it turned out to be quite workable scheme of work, at least for fast stationary computers. If incorrect footer behavior is found, the "underFooter" setting should be disabled.
What pages is this useful for?
On a standard site, without user styles, even short Q&A pages turn out to be longer than 1500px, which in most cases is invisible with horizontal monitors. But even with ordinary monitors, users' personal pages with a height of about 1300 pixels often come across, where an unbroken footer appears in all its glory. A number of pages in the user settings are also not very long.If you use ZenComment user styles, they greatly reduce the required page height, and the HabrAjax user script may not show some or all of the sidebars in the sidebar. Therefore, with scripts and styles, the effect of an unset footer is noticeably more often observed. Therefore, it is logical that the footer fix appeared for the first time in HabrAjax. But even a normal site has a number of pages where a nailed footer would be useful.
Will there be support?
The behavior of the site over the past year shows that the developers (and therefore the management) have begun to implement features that previously existed only in user scripts and user styles. For example, at the beginning of the year I wrote, where I collected many small wishes. Six months later, I returned to it and noted with satisfaction (right in the text; you can see the "UPD" and the dates) that a number of features described as wishes had already been implemented into the site.
Next, let's look at the “arrows” instead of the boxes for evaluating comments. They appeared in the usersily almalexa ("Prettifier") 3 years ago and were taken over in ZenComment 2 years ago. About 2-3 months ago, they appeared on the site. Begins to believe that after a while the arrows will spread some distance, as it is done in ZenComment (one arrow to the left of the number, the second to the right), in order to miss less. Add tags
Vlad Merzhevich
A basement in web developer jargon is the lower part of a site where copyrights are written, contacts are published, various counters are displayed, and the like. Typically, the footer is located after all content and is only visible when scrolling the page. In some cases, it is desirable to make the footer always available, regardless of the page height, and fix it to the bottom of the browser window.
To do this, we will use the position property and its fixed value. In this case, the element remains in one place, and its position is set by coordinates through the properties top, right, bottom, left. In our case, it is enough to set zero values for left and bottom. The width of the fixed elements is equal to their content, which is clearly visible if you add a background color or image, so you also need to set the width through width to 100% (example 1).
Example 1. Fixed basement
The result of the example is shown in Fig. one.
Rice. 1. Basement at the bottom of the page
Internet Explorer 6 does not support the fixed value, so this example will not work correctly in it. For IE6, you will have to add two tags to the code
Example 2. Code for IE6
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
This example uses the absolute value of the position property. With absolute positioning, an element can be positioned anywhere in the browser window, but it scrolls along with its content. This is the main difference between the fixed and absolute values. To prevent the footer from moving, the page height is set to 100% and everything that does not fit into the current window size is clipped. In this case, the vertical scroll bar disappears, it should be added to the content using overflow.
Another unpleasant moment is the imposition of the background of the footer on the scrollbar, so you have to set the indent on the right to the width of the scrollbar. However, if there is no scroll bar, there will be a gaping hole in the basement on the right.
Press the footer to the bottom of the screen. Requirements:
- the footer is pressed to the bottom of the screen when the browser window height is greater than the page height, regardless of the content
- the footer is in its proper place when the content is larger than the height of the browser window
- works in all popular browsers
- reliability - does not depend on the complexity of the layout
Theory
It is good practice to fill the entire accessible area of the browser screen with the site (at least in height for designs that are static in width).
Solution
For example, let's take a simple page with two main blocks: main and footer. Let's make the main block take up the entire area of the browser window, regardless of the amount of content, while pressing the footer to the bottom of the screen so that a vertical scroll bar does not appear in the browser. How we do:
Step 1
We make 2 blocks: the main (main) and the footer (footer). Stretch the main container to the full height of the browser screen (), hard-code the height of the footer ().
In this case, the total height of the site will be the height of the screen + the height of the footer.
Step 2
The note: when using block layout and floating main blocks (columns) for .hFooter, add: both so that the footer is located under the columns .:
HFooter (clear: both; height: 40px;)
Checked in:
Note 1: If you have already mastered CSS a little, then the question may arise: "Why use an additional element when you can use it?". The answer is that you can't just use it here, because the size of the block is equal to its width and height + the sum of the inner margins + the sum of the thicknesses of the borders. Bundle: 100% and will give the site height more than the screen height. As a result, even if there is no content at all, the footer will be outside the "first screen". See below how you can get around this.
Note 2. In Opera 9.5 and above, adding a doctype will not work this example. Bypass options:
- add at least one floating block to the main container tag: This is the main unit
- add two properties for html, body:
Html, body (height: 100%; float: left; width: 100%;)
- move styles to a separate CSS file:
update 8.12.09 - Disadvantage of this technique
This is the use of an optional empty hFooter element. In real conditions (when the content of the site is not empty and a block layout is used), this can be avoided by applying - this example will help clear the flow without using an additional element, and so that the content does not fit into the footer, we will write it in the columns
update 12/28/09 - problems with z-layers
In the above technique, the footer was raised with a negative offset upward. This raises a potential problem with z-layers. For example, we need to show a popup (let it be div class = "popup") that will be positioned relative to the main container.
Main (position: relative; / * so that children are positioned relative to this box * / z-index: 1; / * z-index less than the footer so that it is visible * /) .popup (position: absolute; z-index : 100; [...]) .footer (height: 50px; margin-top: -50px; position: relative; / * so z-index can be set * / z-index: 2; / * larger than main to be visible * /)
Everything is fine until the pop-up window and the basement intersect (and this situation often arises) - this is where the problems begin. Although the popup has the highest z-index, it will overlap with a footer. the parent of the popup has a lower z-index than the footer:
Option 1 is to look for an opportunity to position the window not relative to main, but relative to some other child element located in main. Thus, we will get rid of specifying z-index for main and footer. But this option is not always possible, therefore we will consider the second option for pressing the footer.
Solution 2 - absolute positioning
The idea is similar to solution 1:
- stretch the main block to fit the entire screen
- reserve space for the basement
- relative to the main block, position the footer to the very bottom by absolute positioning
Html, body (height: 100%;) .main (min-height: 100%; position: relative; / * so that children are positioned relative to this block * /) .footer (height: 50px; position: absolute; left: 0 ; bottom: 0; width: 100%;) * html .footer (bottomy: expression (parentNode.offsetHeight% 2? style.bottom = "- 1px": style.bottom = "0px"); / * hack for ie6, which has a jamb with a 1px offset * /)
This approach will solve the problem with pop-ups, because both footer and popup will have a common parent, which means there will be no surprises with z-layers.
