> >

What does this footer tag stand for. How to push the floating footer to the bottom of the page

Hello, dear readers of the blog site. We continue the topic of block layout, which was started and continued in the three previous articles. In principle, we have already managed to create both a two- and three-column site layout, and we even managed to consider the nuances of creating a fluid layout.

In addition, in the first articles on site layout (), some basic concepts of webmastering were considered, without understanding which it would be rather difficult to understand the nuances.

What problems did you have with our website layout?

Today we will try to solve one small problem that may arise with the layout we created earlier. Most often, this situation occurs when viewing it on large monitors (with high resolution) and when displaying a page with little information.

In this case, it may turn out that the footer will not be pressed to the bottom of the screen, but will be located almost in its middle in height, which in most cases will look ugly and unaesthetic.

Still, in my opinion, you need to press the footer to the very bottom of the site layout, and this will be especially true in the case when the page height is less than the height of the user's screen. Schematically, this can be represented as follows:

Those. the correct behavior of the footer for the case of a small amount of information on the page and big screen user will be:

To implement this, we need to carry out a number of manipulations with the code of our layout. Moreover, we will make changes not only to the style file CSS styling Style.css but also in Index.html containing html code and forming Div blocks. But first things first.

For example, we will use the three-column site layout we created earlier. In this case, Index.html will look like this:

header

page content page content page content page content

And the following CSS properties were written in the Style.css file:

Body, html ( margin:0px; padding:0px; ) #maket ( width:800px; margin:0 auto; ) #header( background-color:#C0C000; ) #left( background-color:#00C0C0; width:200px ; float:left; ) #right( width:200px; background-color:#FFFF00; float:right; ) #content( background-color:#8080FF; margin-left:202px; margin-right:202px; ) #footer ( background-color:#FFC0FF; clear:both; )

Well, the layout itself looked something like this:

As you can see, the footer is not pressed to the bottom and, therefore, does not meet our requirements (it is always located under the lowest column), so we will have to make adjustments to the code. All the same can be done for the two-column layout, and for the fluid layout too. The method is universal.

How to push the footer to the bottom of the site layout

So we need to move the footer Div to the bottom of the screen. To do this, you first need to set the height of the entire page to one hundred percent (it will take up the entire screen). This will be necessary in order to then resize the main block with the layout also up to 100%.

All the content of the site page is placed in the opening and closing Body tags and therefore we need to add one more CSS property for the Body tag in Style.css that sets the height to 100%:

Body, html ( margin:0px; padding:0px; height: 100%; )

On appearance this will not be reflected in any way yet, but now the main blog can be stretched to the full height of the screen. Those. it was a kind of preparatory stage.

The main properties of CSS, if you wish, you can see. Now let's set the container Div that encloses our entire layout to a minimum height of 100%:

I also want to highlight it (div with id="maket"). To do this, we will set a frame for it using the corresponding Border () property:

The property border: solid 3px black allows you to set a solid border (solid) with a thickness of 3 pixels in black for this container. This will allow you to clearly see that the container with the layout is stretched to the full height of the screen, even with a small amount of information on the page:

Now we will need to take the footer block out of the general container and place it below, immediately after the general one. What will it give? And the fact that, finally, the footer in the layout deigns to go down, and will not, as before, cuddle up to its longest column. In this case, Index.html will look like this:

header

Left column Menu Menu Menu Menu
page content page content page content

Please note that the footer block is no longer inside a common container (maket), and therefore its width is no longer controlled by the CSS properties set for maket in the Style.css file. The footer will be stretched across the width of the screen, but still it will be located at the bottom of the screen, immediately below the main block:

But again there is a problem, because in order to see the footer, now you have to scroll the screen in the browser (see the scroll bar in the above figure).

It turns out that this is because the main container (maket) occupies the entire screen size in height (this is determined by the min-height: 100% property), and the footer is located immediately behind it, and you will have to use scrolling to view it, which is not very convenient and functional. .

You can solve this problem by giving a negative padding to the footer container Div so that it moves up a distance equal to its height. In this case, the footer container will run over the main container and fit into the height of the browser screen (i.e., you will not need to use scrolling to view it).

But in order to set a negative indent from the top, you need to know this same footer height, but we don’t know it yet.

Therefore, first we set the height of the container containing the footer by setting the corresponding property in Style.css:

#footer( background-color:#FFC0FF; clear:both; height: 50px; )

And then we set for it a negative padding from above to a height equal to its height:

This will allow the footer to rise up exactly to its own height and thus fit into the browser screen (now we can remove the border: solid 3px black CSS property from the maket rule so that the thickness of the border does not prevent our entire layout, along with the footer, from fitting into the screen in height) :

As you can see, now the scrollbar in the browser does not appear and our entire three-column block-based site layout fits on one screen (in case of a small amount of information on the page) and has a footer located at the very bottom. Which is exactly what we needed to do.

We insert the spacer and fight with Internet Explorer

But there is a problem, which will appear only when there is more information on the layout page and this situation may turn out:

It turns out that a situation may arise when the information in one of the columns of the layout will run into the footer, which will not look nice. This is due to the notorious negative padding we set for it, which helped elevate our footer into the main layout container.

Those. it turns out that at the bottom of the screen there are two blocks overlapping each other in the basement area.

The solution to this problem is to add a new empty container Div (called spacers) into the main container of our layout (maket), in the place where the block with the footer was located earlier.

By setting the height of this new container to the height of the footer, we can avoid the information from the main container colliding with the footer block. Let's give this container an ID () called Rasporka and as a result Index.html of our three-column layout will look like this:

header

Left column Menu Menu Menu Menu
Page Content Page Content Page Content Page Page Page Page Page Page Page Content

And in Style.css we write for this ( , which sets the height of this spacer container equal to the height of the basement:

#rasporka ( height: 50px; )

As a result, the footer will be pressed from the bottom not to the information contained in the main container (for example, the text in the highest column), but to an area equal in height to the footer with a spacer container that does not contain any information.

In this way, we avoid collisions and distortions in our three-column layout. Everything will be clear and beautiful (decency and nobility):

As I mentioned above, the width of the footer should now be set separately, because. this container is no longer part of the main one. To do this, add to css file additional properties for the Footer, allowing you to set its width and align it horizontally in the middle of the screen.

It makes sense to set the width equal to the width of the entire layout using the Width property, and horizontal alignment can be done in the same way as we did for the entire layout on a block layout.

Thus, we will need to add additional properties for the Footer ID:

#footer( background-color:#FFC0FF; clear:both; height: 20px; margin-top:-20px; width:800px; margin-left: auto; margin-right: auto; )

Using the width:800px property, the width is set to 800 pixels, and using the two properties margin-left: auto and margin-right: auto , the margin-left setting to the left and right of the footer is automatically set, as a result of which these margins will be equal and our hero will align to middle:

Well, it seems there is nothing more to improve, but there it was. As always, our favorite browser Internet Explorer 6 does not understand something from the CSS properties we use. In this browser (and probably in some other old ones too), despite all our efforts, the footer will not be pressed to the bottom, but will still stick to the highest column of the site layout.

This is all because ( doesn't understand the min-height: 100% property we used to set the main box's minimum height to be the same as the screen height.

Therefore, to solve this problem, we will have to apply the so-called hack, which allows us to explain (on the fingers) to old browsers what to do. Before css list properties for maket you will need to insert the following combination:

* html #make ( height: 100%; )

This rule will only apply to Internet browser Explorer 6, the rest will not take it into account and execute it.

So, the final look of Style.css with the footer pressed to the bottom of the screen will be as follows:

Body, html ( margin:0px; padding:0px; height: 100%; ) * html #maket ( height: 100%; ) #maket ( width:800px; margin:0 auto; min-height: 100%; ) # header( background-color:#C0C000; ) #left( background-color:#00C0C0; width:200px; float:left; ) #right( width:200px; background-color:#FFFF00; float:right; ) #content ( background-color:#8080FF; margin-left:202px; margin-right:202px; ) #footer( background-color:#FFC0FF; clear:both; height: 50px; margin-top:-50px; width:800px; margin-left: auto; margin-right: auto; ) #rasporka ( height: 50px; )

Well, the final form of Index.html was given a little higher. That's it, this series of articles devoted to the block layout of 2 and 3 column fixed and rubber site layouts can be considered completed.

You can also watch the video "Working with Html div tag":

Good luck to you! See you soon on the blog pages site

You may be interested

Block layout - We create two-column, three-column and fluid layouts for the site
DiV layout - Create blocks for two column layout in HTML, determine their sizes and set positioning in CSS

Often when installing buttons, banners, etc. there is a need html inserts, css and JavaScript codes in the body of the body and head tags. Incorrect manual execution of this operation can damage the site and even completely disrupt its performance.

To automate this process, a wonderful plugin has been created, go to the settings in the admin panel and work with pleasure. It is easy to use and has the following features:

To enlarge an image, click on it with the mouse button. Click again to zoom out.

1. Page Head and Footer. Adding code to home page site.

Code to be added on HEAD section of the home (code to be inserted into the header of the home (main) page). Allows you to insert meta tags, codes for advertising banners, buttons, etc. in the tag body . More often this is an invisible part of the code for the absence of a visual display on the site. The result of the work of the visible part of the code will appear above the header on the main page.

Code to be added on HEAD section of every page (code to be inserted in the header of each page). Adding code to the tag body to the HEAD section. The result of the visible part of the code will appear above the header on all pages, including the main one.

Code to be added before the end of the page (code to be inserted at the end (footer) of the page). Add code to the footer on all pages before the closing tag. This only works for themes that have a footer and a footer.php file.

Almost all counters consist of two parts - these are the codes of the invisible and visible (informer) parts of the counter. The invisible part code is inserted after the opening tag , as high as possible to the top of the page. To do this, you can use a plugin or make a correction directly in the header.php file, . The code of the visible part (informer) is inserted into the footer of the site using the Header and Footer plugin before the closing tag or to the sidebar using the widget.

2. Post content (post content). Adding code to the beginning and end of the post on all category pages, when the post is shown in full.

Code to be inserted before each post (code to be inserted before each post). Insert code at the beginning of each post (article) category after the title, only if the article is shown in full.

Code to be inserted after each post (code to be inserted after each post). Insert code after each category post.

3. Page content. Adding code to the beginning and end of the post of all static pages, when the post is shown in full.

Code to be inserted before each page. Insert code at the beginning of each post (article) of the static page after the title, only if the article is shown in full.

Code to be inserted after each page. The code will be inserted after the post on every static page.

4. Facebook. If you add the og:image metafeature (an Open Graph protocol that can be used to enter metadata in Social Graph format on resource pages), for example, a list of Faceboock contacts, then when you click the Faceboock button at the beginning or end of posts, you can control the image selection on all pages, which will go to the user's wall.

5. Snippets. It is possible to set excerpts that are sent to the user's wall when the button is pressed social networks located at the beginning or end of the post. Excerpts are sent as , where N is the number of the excerpt from 1 to 5.

6. Notes and parked codes. Notes.

This is some kind of nightmare! Why is your site's footer popping up again and shifting the design? Is it really impossible to properly press the footer to the bottom of the page with something? Content or bricks at least! Brick in the monitor does not climb?

I see, then sit and do nothing until you read our article to the end.

Making the right footer for your site

Many site owners encounter this problem when the footer of the page just pops up " up". And then it is not clear what to do. Most often, website designs made in haste, on their own ( circle " crazy hands» ) or novice webmasters.

At the same time, at the beginning of the life of the site, nothing terrifying happens. And such an idyll continues as long as the content presses “with its own weight” on the basement, preventing it from rising up. But it is worth placing less material on the page, and the recently “calm” footer instantly rises up, bringing the entire design of the site into an inappropriate look.

To eliminate this "defect" of the made-up template, it is not necessary to spend money on the services of a webmaster. Most often, the footer of the site can be put in place yourself. Let's consider all possible options for eliminating such a problem:

First way

The first way to "anchor" the footer "to the bottom" of the page is based on CSS. Let's start with the example code, and then take a closer look at its implementation:

html ( height: 100%; ) header, nav, section, article, aside, footer ( display: block; ) body ( height: 100%; ) #wrapper ( width: 1000px; margin: 0 auto; min-height: 100 %; height: auto !important; height: 100%; ) #header ( height: 150px; background-color: rgb(0,255,255); ) #content ( padding: 100px; height:400px; background-color: rgb(51,255,102) ; ) #footer ( width: 1000px; margin: -100px auto 0; height: 100px; position: relative; background-color: rgb(51,51,204); )

To stick a footer to the bottom of the page tag

we moved it outside the container (wrapper layer). We stretch the entire page and the contents of the "body" to the borders of the screen. To do this, in the CSS code, we set the height of the tags And in 100%:

html ( height: 100%; ) body ( height: 100%; )

Set the minimum height of the container layer to 100%. For the case when the width of the content is greater than the height of the container, set the property to auto . Thanks to this, the wrapper will automatically adjust to the width of the content placed on the page:

#wrapper ( min-height: 100%; height: auto !important; height: 100%; )

The "height: 100%" line of code is for older versions of IE that don't accept the min-height property.

In order to separate the space for the footer in the page design, we set the indent for the tag at 100 pixels:

#content ( padding: 100px; )

At this point, we've got a full-screen webpage plus an additional 100 pixels, which are "neutralized" by a negative footer padding value (margin: -100px ) when positioned relative to it ( position: relative ). So, with a negative padding value, we are "shifting" the footer into the area of ​​the container, which has a height of 100%.

IN this example Web document markup is defined using relatively new HTML 5 tags that may be misinterpreted by legacy browsers. Because of this, the entire design of the page may not be displayed correctly. To avoid this, you need to replace new tags from the arsenal of version 5 of the hypertext language with regular ones.

:

content

Improved version

The method discussed above on how to make the footer at the bottom of the page “unshakable" is not suitable for everyone. If in the future you are going to modify and improve the design of your site using pop-ups, then it is better to abandon the use of the previous implementation.

Most often in the implementation of pop-up windows is used css property z-index . Its values ​​determine the order in which the layers stack on top of each other.

The higher the z-index value of an element, the higher it will be in the overall “layering” stack.

But because we used a negative footer padding in the previous example, the bottom of the popup will overlap with the top footer area. Even though it will have a higher z-index value. Because the parent of the popup (wrapper ) still has a smaller value for this property.

Here's a better version:

CSS - example code:

html, body ( height: 100%; ) .header ( height:120px; background-color: rgb(0,255,102); ) .main ( min-height:100%; position: relative; background-color: rgb(100,255,255); ) .footer ( height:150px; position: absolute; left: 0; bottom: 0; width: 100%; background-color: rgb(0,0,153); )

As you can see from the code, we placed the footer as part of the main element. We have given the container a relative position, and the absolute position for the footer. We fixed the footer at the very bottom of the container by setting its left and top position to 0.

Variant for basement with non-fixed height

The previous implementations can ensure that the footer is always at the bottom of the page. But only if the footer is fixed width. But what if the amount of content placed in it cannot be predicted?

This will require a more advanced option for an unfixed basement. It sets the footer to table-row for the display property. This will make it appear as a table row.

Everyone who is used to full-fledged website pages prefers the look of a “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 (to the bottom of the window). For example, when we open short pages like habrahabr.ru/settings/social, it immediately catches the eye that the information intended 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 the bottom is empty.

So, instead of .
This manual for beginners will show 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 the execution of your promising project.

Let's look at the implementation of one type of nailed footer, taken from the network, and try to understand 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:

It is unlikely that everyone, even those who know CSS, looking at this code, will understand the principles and will confidently edit a complex project. Any step to the side will lead to side effects. The reasoning and production of the footer below is intended to give you more understanding of the CSS rules.

Let's start with theory

The usual implementation of a nailed footer relies on the CSS2-unique property that elements are immediate children. BODY- support 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 inside percentage-set elements. So if we make a content block (let's call it #layout) having 100% height, it will scroll like it is a window. All (streaming) content is placed in it, except for the footer and maybe the header.

The footer is placed after this block and given a height of 0 pixels. In general, you can follow #layout put as many blocks as you like, but they must all be either 0 pixels high or outside the document flow (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 due to the property margin-bottom: -(height);.

In human terms, styles make an empty "pocket" at the bottom, into which the footer is embedded, and it always turns out to be either stuck to the bottom border of the window, or to the bottom border of the document if the document is higher than the height of the window. On the Internet and on Habré, there are many implementations of the footer, with varying success in all browsers. Let's continue to build it on our own, using Habr's layout as a "workhorse".

Since the bottom of the block #layout- this is a pocket, it must be empty for the footer, not displaying page objects. And here we meet with another 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 margin- emptiness must be done due to the properties of nested elements. Plus, it is necessary to ensure that floating elements do not crawl out under the border of the block, which is done, for example, by the block

, Where .clear(clear:both). It is important that either this " height" was fixed, or in the same relative units, or we would calculate it as the page changes. It's usually convenient to align this alignment box with setting it to the desired height.

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.

...Upper ad block...

Let's move on to a working example

What we see layout flaws in terms of implementing the nailed footer effect? We see that
1) The footer on the site is inside a block with id=layout that does not have a percentage height. In theory, it, the parents, and the .content-left content block should be set to 100% height. Problems arise with the latter - it is not adapted for this. Therefore, one interlayer block is missing or the footer is at the wrong level. Besides,
2) the height of the footer is variable (it depends on the number of elements in the list and on the font size, this is visible not from HTML, but from CSS). AND
3) above #layout there is an ad block with a fixed height of 90px;
4) there are no alignment blocks either in the footer or (generally speaking) in the block #layout(Yes, but above the block .rotated_posts; however, perhaps it should be attributed to the footer).

Point 4 - you have to draw with a script.
It would seem that it would be easy to figure out the third point by adding #layout(margin-top:-90px;) But remember that this block may not exist - it is suppressed by the banner cutter, or advertisers suddenly decide not to show it. There are a number of pages on the site where it is not. Therefore, dependence margin-top from ad block- bad idea. Much better - place it inside #layout Then he won't get in the way.

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, with the help of javascript, you can implement other nailed footer schemes, but in any case, you need JS or the initially correct layout to do without it.

Since we cannot be stronger than the latest layout designer of the site, who “slapped” the footer into the content, we will postpone the idea of ​​correctly placing the footer on our future site (which, therefore, will be “cooler” than Habr!), and we will dissect Habr with javascript (userscript) to the correct states. (Let’s say right away, it’s not the layout designer, not 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 achieve 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 world of IT people are important for us.

Therefore, in the right place in the script (earlier, at the end of the page load), we will write transfers of the DOM blocks of advertising and footer to right places. (Let's get ready for the fact that due to userscripts, the solution will be more complicated than a clean one.)
var dQ = function(q)(return document.querySelector(q);) //for shortening 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) //move 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 userscript takes effect (end of page load). Due to the userscript trigger point, as discussed above, the footer display jump on the page is inevitable. Can you try to make a “good face”, but with a “bad game”? For what? The "bad game" of the site allows you to make 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

in footer h.apnd_el((clss:"clear", appendTo: footer)); var footH = foot.offsetHeight; //...and measure the height of the footer ) if(topL && lay && footer && lay.nextSibling)( //align block of the desired height in the content ("layout") h.apnd_el((clss:"clear", css:( height: (footH ||0) +"px"), appendTo: lay)); lay.style.minHeight ="100%"; h.addRules("#layout(margin-bottom:-"+ footH +"px !important)html, body (height:100%)"); )
Here we allowed ourselves to apply a self-written function h.apnd_el, which does roughly the same as in jQuery -
$("
").css((height: footH ||0)).appendTo($(footer))
And then - another typical CSS rule injection function - h.addRules. Here you can't do without it, because you need to declare a rule with " !important" - just because of the peculiarities of style priorities from the userscript.

With these pieces of code, we can see the nailed footer in the userscript (after jumping it down) and fully understand how to build the page layout. It's annoying to use a jumping design every day, so it's recommended to do it purely for demonstration and testing purposes. In the HabrAjax userscript, I installed a similar script, closing it with the “underFooter” setting (set a “tick” in the list of settings in front of “footer nailed to the bottom”), starting from version 0.883_2012-09-12.

Does the nailed footer affect the need to update the ZenComment styles, if they are set? Yes, it does. Due to the complex style precedence chain, in which styles inserted by userscript have the lowest priority, we had to slightly adjust the userstyles for possibilities work with nailed footer. If you don't update the userstyles (to 2.66_2012-09-12+) - the footer will work inaccurately.

Block rotated_post (three popular posts from the past) looks more logical with the footer, so in the real script it is also moved to the footer.

The second item (from the list of layout flaws) is the reasoning purely for Habr (they do not apply to the user script and partially repeat the previous ones).

Pages have a problem that prevents them from making a nailed footer in pure CSS - an undefined footer height depending on the default font sizes in the browser. To implement a footer in CSS, you need to choose the relative heights of the fonts, but they may not work if the user's computer does not have the provided fonts. Therefore, the solution must include a javascript that can adjust the approximate position of the footer to the exact position with transitions. Or, after looking at the acceptability of the solution made on the userscript on different platforms, make a calculated installation of a nailed footer - 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, arranging the blocks in right order. (Now the footer and the top banner are “not there” and not in such a way that they can simply get a nailed footer with styles.) You can do without JS if you set the footer height in relative units, taking some margin of space for the font indefiniteness.

Implementation

If you enable HabrAjax 0.883+, we will see the “nailed footer” work. It adapts in height with the help of scripts. It allows you to evaluate how much better pages with a nailed footer look compared to regular ones. ZenComment userstyles are compatible with scripts, but for the nailed footer to work properly with them, you need to install ZenComment version 2.66_2012-09-12 +.

Implementation Behavior Facts

Shamanism with footer, styles and scripts is shamanism (only supported by theory). IN different browsers slightly different behavior, but in some places - unexpected. Without userscripts and rearranging blocks, the results will be different. That's what the experiments with the implementation on the userscript gave.

1) Firefox - unexpected lack of footer jumps. It's strange that they are not there - rendering occurs after placing the footer at the bottom.

2) Chrome - it surprised with a "wandering scroll" - empty spaces are added to the page with a period of once per second at the bottom - something wrong happens with the calculation of heights. It is treated by adding html,body(height:100%) to the user style, but without guarantees that it will always work. It is more reliable to check if the document does not exceed the window in height, and if it does 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 hasty reload may show footer jump. Otherwise, it leads no less correctly than Fx.

Well, you have to specifically teach Chrome to behave correctly (with a script) and roll out the version for review in this form. Therefore, the section in the userscript is a little more complicated than the one given in the article.

It should be recalled that this is not a complete 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 the move, where the logic will start to fail without causing inconvenience. The shortcomings are left deliberately, because the balance of the complexity of the revision and the temporary solution is maintained.

As a result, it turned out to be a completely workable scheme of work, at least for fast desktop computers. If incorrect footer behavior is detected, the "underFooter" setting should be disabled.

What pages is it useful for?

On a standard site, without user styles, even short Q&A pages are longer than 1500px, which in most cases is imperceptible with horizontal monitors. But even with ordinary monitors, personal pages of users with a height of about 1300 pixels often come across, where the unnailed footer appears in all its glory. Not very long and a number of pages in the user settings.

When ZenComment user styles are applied, they greatly reduce the required page height, and the HabrAjax userscript may not show some or all of the sidebars in the sidebar. Therefore, with scripts and styles, the effect of an unnailed footer is much more often observed. Therefore, it is logical that the footer fix appeared in HabrAjax for the first time. But even a regular 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 developers (and therefore 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 read the "UPD" and dates) that a number of features described as wishes have already been implemented in the site.

Next, let's look at the "arrows" instead of squares for evaluating comments. They appeared in almalexa ("Prettifier") userforces about 3 years ago and were adopted into ZenComment about 2 years ago. About 2-3 months ago they appeared on the site. He starts to believe that after a while the arrows will spread a certain distance, as is done in ZenComment (one arrow to the left of the number, the second to the right), in order to miss less.

Therefore, perhaps, the “nailed footer” on Habré is not such a fantasy as it might have seemed 3 years ago.

Other features in the HabrAjax script that appeared for the last 3 months (disabled in the settings):
* auto-growth of input fields (in Opera it can slow down on large texts);
* days of the week for dates other than "today" and "yesterday";
* events in the Feed, collapsed to 1 line and 2 characters;
* abbreviation of the words "habr*" to "χ·" and "χα";
* hints of dates by article numbers - it is reported what month and year the article was before it was loaded, by the number in the URL;
* “Related Posts” collapsed to 2 words. Screenshot of "related posts" popup (shows 12 links, not 4).

HTML5 introduces several new tags for code structure:

,