"Footer" is usually the bottom-most block of a web page layout. The most common difficulty in positioning this footer is to get it to always be positioned at the bottom of the window, regardless of page fullness or browser type. There have been a lot of solutions to the problem since the time of the massive transition to block layout, and one of them is given below.
It is necessary
Basic knowledge of CSS and HTML
Instructions
Step 1
Let's take the most common page layout scheme as a basis - three blocks placed one above the other. The top (header) should always be aligned to the top border of the window, the bottom (footer) - to the bottom border, and the main (body) should always fill all the space between them. The source code must contain a link to the XHTML 1.0 Transitional specification, and the description of the styles must be placed in an external CSS file (to avoid problems with Opera 9. XX). The HTML description of the structure must be placed in the main body of the page. It will begin, of course, from the top block, in the tag of which an identifier attribute with a value should be placed, for example, divHead:
Header block.
The main block should consist of a pair of nested blocks. Let's give the outer one divOut, and the inner one divContent:
Main content.
The footer is set to divFoot:
Page footer.
Step 2
The complete HTML code of the page should look like this:
Three blocks
@import "style.css";
This is a header block.
Main content.
This is the footer of the page.
Step 3
The style description implements the following layout mechanism: the middle block (divOut) is set to 100% height, the top block (divHead) will have absolute positioning, and the bottom one - relative. In the main content block (divContent), there must be a free space at the top equal to the height of the heading block so that it does not overlap the main content of the page. And the bottom block (footer) should have a negative margin at the top, equal to the height of this block. This will raise it above the bottom border of the browser window. This mechanism can be implemented using a css file with the following content: * {margin: 0; padding: 0}
html, body {height: 100%;} body {
position: relative;
color: # 000;
}
#divOut {
margin: 0;
min-height: 100%;
background: #FFF;
color: # 000;
}
* html #divOut {height: 100%;}
#divHead {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 80px;
background: # 2F5000;
overflow: hidden;
text-align: center;
color: #FFF;
} #divFoot {
position: relative;
clear: both;
margin-top: -60px;
height: 60px;
width: 100%;
background-color: # 2F5000;
text-align: center;
color: #FFF;
}
.divContent {
width: 100%;
float: left;
padding-top: 81px;
} The name you specified for the stylesheet in the HTML code is style.css.
