How to make the footer part of the page ("footer") stick to the bottom border of the window - this is probably the most common problem in the layout of site pages. There are, of course, solutions, and there are several of them. Below is one way to make sure that the footer is always pressed to the bottom of the page, regardless of the amount of content and the type of browser.
It is necessary
Basic knowledge of CSS and HTML
Instructions
Step 1
Let's take one of the more typical pagination schemes as an example - it will have an attic (header), main block, and footer. Of course, if necessary, you can put several columns in the main block, but we will not do this here, we will focus only on not positioning the footer. The HTML code of the page will begin with the declaration of the specification:
Between the tags and, in addition to the page title, we will place an indication of the encoding: As well as a link to an external CSS file containing a description of styles: @import "styles.css"; We will not place the description of styles directly into the html-code of the page in order to avoid complications with Opera browser of the ninth version. Between tags and place the block structure of the page. The first, of course, is the title block. We'll give it the header identifier in order to be able to set styles for this particular block:
This header is always at the top of the window.
Then - the main block of the page. It will consist of two nested ones - outer (identifier - outer) and inner (identifier - outerwrap):
This is the main part.
And finally, the footer:
It's footer - always at the bottom of the window!
The complete page will look like this:
How to press down on the footer
@import "styles.css";
This header is always at the top of the window.
This is the main part.
It's footer - always at the bottom of the window!
Step 2
Now let's move on to the contents of the stylesheet. It implements the following scheme: the main page block will be set to 100% height, the title will be absolutely positioned, and the footer will be relatively. To prevent the heading from overlapping the main content of the page, this main content is placed in an additional box within the main box, and this additional box is set to a top margin equal to the height of the heading box. And the footer is given a negative top margin equal to its height - in this way it will be raised above the bottom edge of the window to its full height. Full content of the css file: * {margin: 0; padding: 0}
html, body {height: 100%;} body {
color: black;
position: relative;
}
#outer {
min-height: 100%;
margin: 0;
background: white;
color: black;
} * html #outer {height: 100%;}
#header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
background: # 304a00;
overflow: hidden;
color: white;
text-align: center;
} #footer {
position: relative;
margin-top: -50px;
clear: both;
width: 100%;
height: 50px;
background-color: # 304a00;
color: white;
text-align: center;
}
.outerwrap {
float: left;
width: 100%;
padding-top: 71px;
} This file should be saved with the name that we specified in the html-code of the page - styles.css.
