How to use CSS to push footer to the bottom of the browser window. How to properly nest a floating footer to the bottom of the page What does this footer tag stand for

Anyone who is used 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 down and footers that are not nailed (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\u003e #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 footer construction 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 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) that has 100% height, it will scroll as if it were a window. All (streaming) content is put into 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 stuck 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 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 should be empty for the footer, not displaying the page objects. And here we come across another limitation - we cannot make an empty pocket at the expense of padding at #layout, because then it will become more than 100%. Will not save and margin - emptiness needs to be done due to the properties of nested elements. In addition to everything, it is necessary to ensure that floating elements do not fit under the border of the block, which is done, for example, by a 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 in the process of changing the page. It is usually convenient to combine this alignment box with setting the required height for it.

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 disadvantages of layout in terms of implementing the effect of a nailed footer? We see that
1) the footer on the site is inside a block with id \u003d layout, which has no percentage height. In theory, he, the parents, and the content-left block need to be set to 100% height. There are problems with the latter - it is not suitable for this. Consequently, one interlayer block is missing or the footer is on the wrong level. Besides,
2) the height of the footer is variable (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) over #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 site pages where it is not. Therefore dependence 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 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 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 \u200b\u200bthe 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 transfers of the DOM ad and footer blocks to the required places. (Let's get ready for the fact that the solution will be more complicated than a clean one due to user scripts.)
var dQ \u003d function (q) (return document.querySelector (q);) // for shorthand var topL \u003d dQ ("# topline"), lay \u003d dQ ("# layout"), foot \u003d 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 acts (end of page loading). 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? 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 the footer h.apnd_el ((clss: "clear", appendTo: footer)); var footH \u003d foot.offsetHeight; // ... and measure the height of the footer) if (topL && lay && footer && lay.nextSibling) (// aligning block of the desired height in the content ("layout") h.apnd_el ((clss: "clear", css :( height: (footH || 0) + "px"), appendTo: lay)); lay.style.minHeight \u003d "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_elwhich does approximately the same as in jQuery -
$("
") .css ((height: footH || 0)). appendTo ($ (footer))
And then there is another typical CSS rule injection function - h.addRules... Here you cannot do without it, 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 frustrating 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 capabilities work with a nailed footer. If you don't 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) is the reasoning purely for Habr (they do not apply to the user script and partially repeat the previous ones).

Pages have a problem preventing them from rendering a nailed footer in pure CSS - an undefined footer height, depending 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 the approximate position of the footer with transitions to the exact one. Or, having looked at the acceptability of the solution made in the user script on different platforms, make a calculated installation of the nailed footer - the first observations show that the solution is practical.

Conclusion: it is possible to 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 footer height 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 a page with a nailed footer looks compared to normal pages. ZenComment userstyles are compatible with scripts, but for the nailed footer to work properly, 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 - it surprised me with a "wandering scroll" - empty spaces at the bottom are added to the page with a period of once a second - something wrong happens 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 jumping (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 not very long either.

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 a 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 a lot of small wishes. Six months later, I returned to it and noted with satisfaction (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 the boxes for evaluating comments. They appeared in almalexa ("Prettifier") users about 3 years ago and were adopted 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.

Therefore, perhaps, the "nailed footer" on Habré is not such a fantasy as it might seem 3 years ago.

Other features in the HabrAjax script introducedfor the last 3 months (can be disabled in the settings):
* Authors of input fields (in the Opera it can slow down on large texts);
* days of the week with dates other than "today" and "yesterday";
* Events in the Feed, collapsible to 1 line and 2 characters;
* reduction 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;
* collapsed "Related posts" to 2 words. Screenshot of "similar posts" pop-ups (showing 12 links, not 4).

This is some kind of nightmare! Why does your site footer pop up again and shift the design? Isn't it possible to properly press the footer to the bottom of the page with something? Content or bricks, though! Will a brick fit into the monitor?

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

Making the right footer for your site

Many site owners face this problem when the page footer just pops up "up". And then it is not clear what to do. Most often, such a shortcoming is sinned by website designs that were quickly laid out on their own ( circle "crazy hands") or novice webmasters.

At the same time, at the beginning of the life of the site, nothing terrible happens. And this idyll continues as long as the content presses "with its own weight" on the basement, not allowing it to rise up. But it is worth placing less material on the page, and the recently "calm" footer instantly rises up, making the entire site design inappropriate.

To eliminate this "defect" of the layout template, it is not necessary to spend money on webmaster services. Most often, the site footer can be replaced by yourself. Consider all possible options for eliminating such a problem:

The first way

The first way to "anchor" the footer "to the bottom" of the page is based on CSS. Let's start with an 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 glue the footer to the bottom of the page tag

we moved outside the container (wrapper layer). Stretch the entire page and the content 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%;)

We also set the minimum height of the container layer to 100%. In case the content width is larger than the container height, 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 do not accept the min-height property.

To make space for the footer in the page design, we set the indentation for the tag in 100 pixels:

#content (padding: 100px;)

At this point, we have a full screen web page with an additional 100 pixels, which are "neutralized" by a negative footer margin (margin: -100px) when it is positioned relative (position: relative). Thus, with a negative padding value, we "shift" the footer to the area of \u200b\u200bthe container, for which the height is set to 100%.

In this example, the markup of the web document is specified using relatively new HTML 5 tags that may be misinterpreted by older versions of browsers. Because of this, the entire design of the page may be displayed incorrectly. To avoid this, you need to replace the new tags from the arsenal of version 5 of the hypertext language with the usual ones.

:

content


Improved option

The above method of making the footer at the bottom of the page "immutable" is not 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 previous implementation.

The most common implementation of pop-up windows uses the CSS z-index property. Its values \u200b\u200bare used to set the stacking order of layers.

The higher the z-index of an element, the higher it will be in the general layering stack.

But due to the fact that we used a negative footer padding in the previous example, the bottom of the popup will overlap with the top footer. Even though it will have a higher z-index. Because the parent of the popup (wrapper) still has a lower 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 have placed the footer in the main element. We set the container to relative positioning, and absolute positioning for the footer. We fixed the footer at the very bottom of the container, setting its position on the left and top to 0.

Basement option with non-fixed height

Previous implementations can ensure that the footer is always at the bottom of the page. But only if the basement is of a fixed width. But what if the amount of content posted in it cannot be predicted?

This will require a better option for a non-fixed basement. It sets the footer to the table-row value for the display property. This will make it appear as a table row.

If shoes are the final piece of any outfit, then an e-Commerce footer is the final element of its marketing design. By focusing on the bottom-most element of the "footer", modern websites are ready to showcase their individuality in every way. In a competitive e-commerce environment, there are enough original ideas, creativity and design trends. Before diversifying the footer of an E-commerce site, there are important points to consider. What to place first and how best to do it? Our review of inspiring footer designs has some interesting options.

Read also: 13 ecommerce marketing trends of 2019

Interesting statistics from the Chartbeat company. A study of the behavior of 25 million users showed how deeply they browse pages. It turns out that user attention is drawn to the space below the fold line. Getting more practically useful information, visitors stay the longest in the 1200px area from the top of the page (with an average of 700px on the 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 most TOP - 4 seconds, the duration reaches a maximum (16 seconds) at 1200 pixels from the top and with further scrolling, it slowly decreases.

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

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

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

Ideas on how to decorate a "basement" (footer), examples of selling designs

These 10 tips will show you how to create a beautiful footer for your website - according to the rules of composition in web design and with the resolution of priorities. 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 highlighted in the footer of the site. Notifications are rendered in less visible text, which frees up other areas of the page for more meaningful elements. Here's a rough list to consider:

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

The website that sells the goods must comply with legal requirements and provide information on the procedure, return times. Its location in the footer is convenient for both the selling resource and the visitors.

Example footer'a: Yves Rocher

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

Example footer'a: Lumity

Traders of food additives are charged with increased legal value. a responsibility. There are quite a few things they should / shouldn't say on their marketing site. Links to legal information are 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 border, rather the content itself serves as a separator

Example footer'a: Saddleback Leather Co

A selling website with a beautiful retro design of the header and footer. 100 year limited warranty against defects in material and workmanship. Return terms 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

By limiting the number of footer links, do not skimp on negative space - this will have a tremendous effect on the visual perception and improve readability. As a general rule of thumb, when observing the visual hierarchy, the central elements are noticed more quickly (can be used to advantage!).

Example footer'a: QUAY AUSTRALIA

With a minimalist style and a fixed dropdown menu, an online store can afford a spacious footer.

Example footer'a: Incase

A large amount of micro-negative space (between small elements) can be said this way: as long as all the necessary information is present, it is legible and quickly perceived - everything is fine

Example footer'a: Stumptown Coffee Roasters

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

3. Closing call to action

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

The stylish design of the footer speaks volumes about the resource itself. It is important to note: the buyer lingers here a little longer than in the rest of the page. An opportune occasion for another final call to action. Often this is a subscription / newsletter, but you can associate a CTA call with the registration of an account.

Example footer'a: Greetabl

Greetabl has a modestly styled footer that includes a call for subscription. With a minimum of elements, the appeal becomes noticeable, and in harmony with the turquoise background turns into a site decoration

Example footer'a: Ecwid

Nice design with calls to action at the bottom of the pages. The structure of the website builder is universal. It has been translated into 35 languages \u200b\u200bfor a million of its clients

4. Floating basket - increasing the availability of selling functionality

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

Example footer'a: Lemonadela

The catering company's website that sells is pleasant-looking and convenient for the buyer

5. Navigation in the footer

The footer of the site is ideal for not frequently viewed information: 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 infrastructure of the eCommerce store, instinctively scrolling down ...

Negative space is essential for the readability of the content. In general, the "footer" is not for navigation purposes, unlike the menu or sitemap. Only in rare cases, e-commerce sites place certain categories of products in the footer (

I remember that at the moment when I began to switch from tables to layout by divs, one of the difficulties that I encountered was the following - how to push the footer to the very bottom of the browser windowto make the page look elongated to its full height, regardless of the amount of text, and if the page height is greater than the height of the browser window (when the scroll appears), the footer would remain in its proper place.

If using tables this task is solved only by specifying the height for the table and / or a cell nested in it, then when using CSS in a block layout, a completely different approach is used.

In the process of practice, I singled out for myself 5 ways to push footer to bottom of browser window using CSS.

The HTML code of all presented methods has the following structure (the only difference is in the CSS code):



The CSS below includes only those properties that are minimally required to implement the corresponding method. For each of them, you can see a live example.

The first way

The footer is squeezed downward by positioning it absolutely and pulling the height of its parent blocks (html, body and .wrapper) by 100%. In this case, the content block.content must be specified with a bottom padding that is equal to or greater than the height of the footer, otherwise the latter will cover part of the content.

* (margin: 0; padding: 0;) html, body (height: 100%;) .wrapper (position: relative; min-height: 100%;) .content (padding-bottom: 90px;) .footer (position : absolute; left: 0; bottom: 0; width: 100%; height: 80px;)

Second way

The footer is pressed down by stretching the content block and its "parents" to the full height of the browser window and lifting the footer up through a negative margin (margin-top) to get rid of the vertical scrolling that appears at the same time. In this case, it is necessary to indicate the height of the basement, and it must be equal to the amount of indentation.

* (margin: 0; padding: 0;) html, body, .wrapper (height: 100%;) .content (box-sizing: border-box; min-height: 100%; padding-bottom: 90px;). footer (height: 80px; margin-top: -80px;)

Thanks to the box-sizing: border-box property, we prevent the .content box from exceeding 100% height. That is, in this case min-height: 100% + padding-bottom: 90px equals 100% of the browser window height.

Third way

It is good in that, unlike other methods (except for the 5th), the height of the footer does not matter.

* (margin: 0; padding: 0;) html, body (height: 100%;) .wrapper (display: table; height: 100%;) .content (display: table-row; height: 100%;)

Here we are emulating table behavior by turning the .wrapper block into a table and the .content block into a table row (display: table and display: table-row properties respectively). Due to this, as well as the fact that the .content block and all its parent containers are set to 100% height, the content is stretched to the full height, but minus the footer height, which is determined automatically - table emulation prevents the footer from crawling out of the browser window height.

As a result, footer is pushed to the bottom.

Fourth way

This method is unlike any of the previous ones, and its peculiarity lies in the use of the CSS calc () function and vh units, which are only supported by modern browsers. Here you need to know the exact height of the basement.

* (margin: 0; padding: 0;) .content (min-height: calc (100vh - 80px);)

100vh is the height of the browser window and 80px is the height of the footer. And using the calc () function, we subtract the second value from the first, thereby pressing the footer to the bottom.

To find out which browsers support calc () and vh, you can visit caniuse.com using the following links: support for the calc () function, support for the vh unit.

Fifth method (most relevant)

This is the best way of all, but it only works in modern browsers. As in the third method, the height of the footer does not matter.

* (margin: 0; padding: 0;) html, body (height: 100%;) .wrapper (display: flex; flex-direction: column; min-height: 100%;) .content (flex: 1 0 auto ;) .footer (flex: 0 0 auto;)

You can find out about browser support for the flex property.

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

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

To enlarge the picture click on it with the mouse button. Click again to zoom out.

1. Page Head and Footer... Adding code to the main page of the site.

Code to be added on HEAD section of the home (code that must be inserted into the header of the home (main) page). Allows you to insert meta tags, ad banners, buttons, etc. in the body of the tag ... 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 that must be inserted into the header of each page). Adding code to the tag body to the HEAD section. The result of the work 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). Adding code to the footer on all pages before the closing tag

... This only works for themes with a footer and footer.php file.

Almost all counters consist of two parts - these are 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 adjustments directly to 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 a widget.

2. Post content... Adding code to the beginning and end of the post on all category pages, when the post is fully displayed.

Code to be inserted before each post (code to be inserted before each post). Inserting the code at the beginning of each post (article) of the 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). Inserting a code after each post in a category.

3. Page content. Adding code to the beginning and end of the post of all static pages, when the post is fully displayed.

Code to be inserted before each page. Inserting code at the beginning of each post (article) of a 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. Faceboock... If you add the og: image meta-feature (the Open Graph protocol, with which you can enter metadata in Social Graph format on resource pages), for example, the Faceboock contact list, 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 passages that are sent to the user's wall when clicking the social networks button located at the beginning or at the end of the post. Passages are referred to as, where N is the passage number from 1 to 5.

6. Notes and parked codes. Notes.