How to properly press a floating footer to the bottom of the page. New Footer tags html design

Let's move on to a working example

Which ones do we see? layout flaws in terms of implementing the effect of a nailed footer? We see that
1) The footer on the site is located inside a block with id=layout, which does not have a percentage height. According to theory, he, the parents and the content block.content-left need to set the height to 100%. Problems arise with the latter - it is not suitable for this. Consequently, one interlayer block is missing or the footer is not at the right level. Besides,
2) The footer height is variable (depending on the number of elements in the list and the font size, this can be seen not from the HTML, but from the CSS). AND
3) over #layout there is an advertising 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 classified as a footer).

Point 4 - you will have to draw it with a script.
It would seem easy to deal with the third point by adding #layout(margin-top:-90px;) But remember that this block may not exist - it is suppressed by banner cutting, or advertisers suddenly decide not to show it. There are a number of pages on the site where it is not. Therefore the dependence margin-top from an ad block is a bad idea. It's much better to place it inside #layout- then he won’t 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, with the help of javascript you can implement other nailed footer schemes, but in any case you need JS or initially correct layout to do without it.

Since we cannot be stronger than the latest website layout designer who “slapped” the footer inside the content, we will put aside the idea of ​​​​properly placing the footer on our future website (which, therefore, will be “cooler” than Habr!), and we will dissect Habr with javascript (userscript) to the correct one condition. (Let’s say right away that it is not the layout designer or switcher who is to blame, but the type of 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 have an incorrect layout. But what is important to us is the concept and the opportunity to surpass in quality the most popular website in the IT world.

Therefore, in the right place in the script (early, at the end of the page loading), we’ll write transfers of the DOM blocks of advertising and footer to the right places. (Let’s be prepared for the fact that, due to user scripts, the solution will be more complicated than a pure solution.)
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) //moving the footer lay.parentNode.insertBefore(footer, lay.nextSibling);
We have placed the blocks in their places - now all that remains is to assign the necessary properties to the elements. The footer height will have to be set exactly, simply because we already know it by the time the user script is active (end of page loading). Due to the trigger point of the userscript, as mentioned above, a jump in the display of the footer on the page is inevitable. You can try to put on a “good face”, but with a “bad game”? For what? The “bad game” of the site allows you to create a concept without extra effort, which will be enough to assess the quality and will not be needed for the “correct game” on your project.
if(foot)( //block-aligner

in the 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)( //aligning block of the required 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 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 - another typical function of implementing CSS rules - h.addRules. You can't do without it here, because you need to declare a rule with " !important" - precisely because of the peculiarities of the priorities of styles from the user script.

With these pieces of code, we will be able to see the nailed footer in the userscript (after jumping down) and fully understand how to build the page layout. Using a jumping design on a daily basis is unpleasant, 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 “footer nailed to the bottom”), starting with version 0.883_2012-09-12.

Does nailing the footer affect the need to update ZenComment styles if they are installed? Yes, it does. Due to the complex chain of style priorities, in which styles inserted by the user script have the lowest priority, we had to slightly adjust the user styles for possibilities working with nailed footer. If you do not update your user styles (to 2.66_2012-09-12 +), the footer will not work accurately.

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

The second point (from the list of layout shortcomings) is a discussion purely for Habr (it does not apply to user script and partially repeats the previous ones).

Pages have an issue that prevents them from making a nailed footer using pure CSS - an undefined footer height depending on the default font sizes in the browser. To implement a footer using CSS, you need to select the relative heights of the fonts, but they may not work if the user’s computer does not have the required fonts. Therefore, the solution must include a JavaScript that can adjust the approximate position of the footer to the exact position using transitions. Or, after looking at the acceptability of the solution made in a user script on different platforms, make a calculated installation of a nailed footer - first observations show that the solution is practical.

Conclusion: it is possible to fully design a 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. (Currently, the footer and top banner are “in the wrong place” and not in such a way that you can just style the footer nailed down.) You can do without JS if you set the height of the footer in relative units, taking some room for font uncertainty.

Implementation

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

Facts about implementation behavior

Shamanism with footer, styles and scripts is shamanism (only supported by theory). The behavior is slightly different in different browsers, but in some places it is unexpected. Without user scripts and rearranging blocks, the results will be different. This is what experiments with implementation in user script yielded.

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

2) Chrome - it surprised me with “wandering scrolling” - 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. The solution is to write html,body(height:100%) in the user style, but there is no guarantee that it will always work. It is more reliable to check whether the document does not exceed the height of the window, and if it does not, then move the footer, otherwise - nothing. Jumping is okay, it exists.

3) Opera - no jumps (v. 12.02) when the page first loads, but a hasty reload may show a footer jump. Otherwise it behaves no less correctly than Fx.

Well, you’ll have to specially teach Chrome to behave correctly (with a script) and roll out the version in this form for display. Therefore, the section 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 begins to fail without leading to inconvenience. The shortcomings were left deliberately, because a balance was maintained between the complexity of improvement and the temporary nature of the solution.

As a result, we got a completely workable operating scheme, at least for fast desktop computers. If incorrect behavior of the footer is detected, the “underFooter” setting should be disabled.

What pages is this useful for?

On a standard website, without user styles, even short question and answer pages turn out to be longer than 1500px, which in most cases is unnoticeable with horizontal monitors. But even with ordinary monitors, you often come across personal user pages with a height of about 1300 pixels, where the unattached footer appears in all its glory. The number of pages in the user settings is 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 side blocks in the sidebar. Therefore, with scripts and styles, the effect of an unattached footer is noticeably more often observed. Therefore, it is logical that the footer fix appeared in HabrAjax for the first time. But a regular website also 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) began to introduce 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 was pleased to note (right in the text; you can see the “UPD” and 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 squares for rating comments. They appeared in almalexa usernames (“Prettifier”) 3 years ago and were adopted into ZenComment 2 years ago. About 2-3 months ago they appeared on the site. One begins to believe that after some time the arrows will be spaced some distance apart, 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 as fantastic as it might have seemed 3 years ago.

Other features in the HabrAjax script that have appeared for the last 3 months (can be disabled in 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 “χα”;
* date hints by article numbers - it is reported what month and year the article is before it is downloaded, by the number in the URL;
* “Related posts” have been reduced to 2 words. Screenshot of “related posts” popping up (shows 12 links, not 4).

If shoes are the final component of any outfit, then the footer for an e-Commerce site is the final element of its selling design. By focusing on the bottom element, the footer, modern websites are ready to showcase their personality in every way possible. In a competitive e-commerce environment, there are enough original ideas, creativity and design trends. Before diversifying the footer of an E-commerce site, it is worth considering important points. What to place first and what is the best way to do it? Our roundup of inspiring footer designs has some interesting options.

Read also: 13 eCommerce Marketing Trends for 2019

Interesting statistics from Chartbeat. A study of the behavior of 25 million users showed how deeply they browse pages. It turns out that the user's attention is drawn to the space below the fold line. Receiving more practically useful information, visitors linger longest in the area 1200px from the top of the page (with an average 700px vertical screen in the browser), or behind the second screen.

View time (sec.) / Distance from top of page (pixels)

There is a large gap in the duration of viewing the first and second screens. The TOP is 4 seconds, the duration reaches a maximum (16 seconds) at 1200 pixels from the top and, with further scrolling, slowly decreases.

Share of visitors (%) / Distance from top of page (pixels)

A significant portion of visitors (more than 25%) do not even wait for the content to load and start scrolling the page. This means that only 75% will see the very top first. The most viewed area of ​​the page is 550px (just above the fold line).

The study dispels the myth that users don't scroll to the bottom of the page and watch all the content. The footer is also important for a modern eCommerce site, and even has its own advantages.

Ideas on how to design a “basement” (footer), examples of selling designs

These 10 tips will tell you how to beautifully design the footer for a website - according to the rules of composition in web design and solving priority tasks. Apply the most appropriate tactics to improve usability, UX (user experience) and even increase sales.

1. Required information

Traditionally, the required organizational and legal issues are covered in the footer of the site. Notifications are designed with less noticeable text, which frees up other areas of the pages for more meaningful elements. Here's a sample list to consider:

• Copyright notices
• Legal Disclaimers
• Billing information
• Cookie Notice

The website selling the product must meet legal requirements and provide information about the procedure and return periods. Its location in the footer is convenient for both the selling resource and visitors.

Footer example: Yves Rocher

Online store of the Yves Rocher brand: full-screen footer with a pleasant design of alternating layers. Informs about the company, the infrastructure of the selling website - from order tracking to personal data policy. There are also tips on using the product, bonuses, promotions

Example footer: Lumity

Dealers of nutritional supplements are subject to increased legal requirements. responsibility. There are quite a few things they should/shouldn't say on their sales website. Links to legal information are highlighted in bold for better visibility.

A footer with a beautiful background image fits very organically into the overall design of the site. There is no clear boundary; rather, the content itself serves as a separator

Example footer: Saddleback Leather Co

A selling website with a beautiful retro header and footer design. 100-year warranty against defects in material and finish. The return conditions are accompanied by interesting stories... not everything is so sad with the necessary e-Commerce information, it turns out

2. Negative space – sufficient visual distance

When limiting the number of footer links, don't skimp on negative space - this will have a stunning effect on visual perception and improve readability. The general rule is that if you maintain visual hierarchy, central elements are noticed faster (can be used to your advantage!).

Footer example: QUAY AUSTRALIA

With a minimalistic style and a fixed drop-down menu, the online store can afford a spacious footer

Footer example: Incase

About a large amount of micro-negative space (between small elements) we can say this: as long as all the necessary information is present, it is legible and quickly perceived - everything is fine

Example footer: Stumptown Coffee Roasters

The spacious footer of a coffee site is an excellent completion of a clean design composition, in which there is a lot of macro-negative space (“air” between sections/sections)

3. Final call to action

Read also: 30+ examples and ideas for designing target action buttons

The stylish design of the footer speaks volumes about the resource itself. It’s important to note: the buyer stays here a little longer than in other parts of the page. A convenient opportunity for one more, final call to action. Often this is a subscription/newsletter, but you can also link a CTA call to account registration.

Footer example: Greetabl

Greetabl has a modestly designed bottom of its pages that includes a call to subscribe. With a minimum of elements, the call becomes noticeable, and in harmony with the turquoise background it turns into a decoration of the site

Footer example: Ecwid

Nice design with calls to action at the bottom of the pages. The structure of the selling website builder is universal. It has been translated into 35 languages ​​for its million customers.

4. Floating cart – increasing the availability of selling functionality

Accessing the shopping cart from the bottom of the site is a great way to improve the usability and selling qualities of the site.

Footer example: Lemonadela

The selling website of the catering company is pleasant to look at and convenient for the buyer

5. Footer navigation

The bottom part of the site is ideal for information that is not often viewed: about the company, terms of service and privacy policy. In this case, the function of the footer is to save everyone. Feeling lost in the eCommerce environment, someone becomes interested in the e-commerce infrastructure, instinctively scrolling further...

Negative space is essential for the readability of content. In general, the “footer” is not for navigation purposes, unlike a menu or site map. Only in rare cases, e-commerce sites place individual product categories in the footer (

This is some kind of nightmare! Why is the footer of your site “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 won't fit into the monitor?

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

Making the right footer for your website

Many website owners encounter this problem when the footer of the page simply floats to the top. And then it is not clear what to do. Most often, website designs that have been put together in a hurry, on your own, suffer from this drawback ( circle “crazy hands”) or novice webmasters.

At the same time, nothing terrible happens in the early stages of the site’s life. And this idyll continues as long as the content presses “with its weight” on the basement, preventing it from rising up. But it’s worth placing smaller volumes of material on the page, and the recently “calm” footer instantly rises to the top, bringing the entire site design into an inappropriate appearance.

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

First way

The first way to “link” the footer “to the bottom” of the page is based on CSS. First, let's give 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 attach a footer tag to the bottom of the page