Using the footer tag to create a footer on the page. DIY nailed footer footer tag usage

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 website layout, and we even managed to consider the nuances of creating a rubber layout.

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

What are the problems 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 a small amount of 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 not aesthetically pleasing.

Nevertheless, in my opinion, it is necessary to press footer to the very bottom of the site layout, and this will be especially true in the case when the page height turns out to be less than the user's screen height. It can be schematically represented as follows:

Those. the correct footer behavior for the case of a small amount of information on the page and a large user screen would be as follows:

To implement this, you need to perform a number of manipulations with the code of our layout. Moreover, we will make changes not only to the style CSS file Style.css, but also to Index.html, which contains the Html code and forms the Div blocks. But first things first.

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

And the following CSS properties were specified 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 you will have to make adjustments to the code. All the same can be done for the two-column and rubber models too. The method is universal.

How to push a footer to the bottom of a website layout

So, we need to move the div container with the footer 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 occupy the entire screen). This will be needed in order to then resize the main block with the layout to 100% too.

The entire content of the site page is placed in the opening and closing Body tags, and therefore we need to add another CSS property to the Body tag in Style.css that sets the height to 100%:

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

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

Basic CSS properties, if you wish, you can look at. Now let's set the div container, which contains our entire layout, to a minimum height of 100%:

I also want to highlight it (div with id \u003d "maket"). To do this, I will give it a border using the corresponding Border () property:

The border: solid 3px black property sets the container to a solid 3px black border. This will allow you to visually see that the container with the layout has stretched to the full height of the screen, even with a small amount of information on the page:

Now we will need to move 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, will deign to go down the footer in the layout, and will not, as before, cling to its longest column. In this case, Index.html will look like this:

Please note that the block with the footer is no longer inside the general container (maket), and therefore its width is no longer controlled by the CSS properties set for the maket in the Style.css file. The footer will stretch in width to fill the entire screen, but it will still be located at the bottom of the screen, right below the main block:

But again, a problem arises, because in order to see the footer, now you have to scroll the screen in the browser (you can see the scroll bar in the picture above).

It turns out that 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 ...

A solution to this problem is to set a negative margin for the div container with a footer so that it is displaced upward by a distance equal to its height. In this case, the footer container will run over the main one and fit into the height of the browser screen (i.e., it will not need to use scrolling to view it).

But in order to set a negative margin from the top, you need to know this very height of footer, but we do not know it yet.

Therefore, we first set the container containing the footer to a height by setting the appropriate property in Style.css:

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

And then set a negative top margin for it 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 border thickness does not interfere with our entire layout along with the footer to fit into the screen in height) :

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

Insert the spacer and fight Internet Explorer

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

It turns out that a situation may arise when information in one of the columns of the layout overlaps the footer, which will not look pretty. This happens because of the notorious negative padding that we set for it and which helped to raise our footer with a hit on the main container of the layout.

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

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

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

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

#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 tallest column), but to an area equal to the footer in height with a spacer container that does not contain any information.

This way we avoid collisions and distortions in our three-column layout. Everything will be clear and beautiful (decorous and noble):

As I already mentioned above, the footer width should now be set separately for us, because this container is no longer part of the main one. To do this, you need to add additional properties for the Footer to the CSS file, 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 ID Footer:

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

Using the width: 800px property sets the width to 800 pixels, and using the two properties margin-left: auto and margin-right: auto sets the padding to the left and right of the footer automatically, as a result of which these paddings will be equal and our hero will be aligned to middle:

Well, there seems to be nothing more to improve, but it was not there. As always, our favorite browser Internet Explorer 6 does not understand something from the CSS properties we use. In this browser (and, perhaps, 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.

All this is due to the fact that (does not understand the min-height: 100% property, which we used to set the minimum height of the main box to be equal to the screen height.

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

* html #maket (height: 100%;)

This rule will be applied only for the Internet Explorer 6 browser, the others will not take it into account and enforce 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 view of Index.html was shown just above. That's it, this series of articles devoted to block layout of 2 and 3 column fixed and fluid layouts of the site can be considered complete.

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

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

You might be interested

Block Layout - Create Two Column, Three Column, and Fluid Site Layouts
DiV layout - Create blocks for a two-column layout in HTML, determine their sizes and set their positioning in CSS

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:

Let's start with theory

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

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.