CSS bottoming technique can be used in Footer block

 Web design as a whole will first plan the presentation of the page. The general plan may be like the picture below. Starting from the top Site Name, there is a Sidebar block on the left (usually the menu of some web pages), and the right hand is the main Of course, the bottom of the text area is the bottom of the page or called Footer! This is just a common web page planning method. Of course, there are many wild design methods, which are beyond the scope of this article. The focus of this article is on the application of the techniques of how to bottom the Footer block. Please continue reading.

This example plan can be completely typeset using CSS . The normal typesetting method starts from the top. The skills needed are the width and height of the < DIV > tag, and the design of float syntax. The entire example may be a little long after the explanation. (It should be super long), so we don’t want to set it for each block. Since we just want to set the Footer to the bottom, we use a very simple way. No matter what the height of the block above is, the Footer is in the bottom state. .

Suppose our webpage blocks are distributed like this

<div id="Site Name">Site Name</div>
<div id="Main">Main: Sidebar + Content</div>
<div id="Footer">Footer</div>

To simplify the example, here we will integrate Sidebar and Content into the Main block to illustrate. To set the Footer block to the bottom, you need to set it from Main. The concept is that the Main block sets a bottom padding-bottom, and reserves space for the Footer block, while the footer distance above is negative Fixed margin (margin-top), the position needs to use relative position (relative), so that Footer will fill up the space reserved in the Main block, as shown below:

#Main {
　padding-bottom: 100px;
}
#Footer {
　height: 100px;
　position: relative;
　margin-top: -100px;
}

In the Main block in the example, we set a padding-bottom of 100px, then the Main block will reserve a space of 100px distance at the bottom, and then set the height of the Footer to 100px and adopt the relative position (position : relative), the upper margin (margin-top) is set to 100px, which is equivalent to letting Footer fill in the vacancy of Main, so the Footer will naturally be connected below the Main block, showing the bottom state!