Shulou(Shulou.com)06/03 Report--

This article is about how to fix the footer at the bottom of the page in web development. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

As a front-end siege of Web, when making page effects, you must encounter the following phenomenon: when a HTML page contains less content, the "footer" part of the Web page floats up with it, in the middle of the page, which has a great impact on visual effects, making your page look ugly, especially now more and more wide screen, this phenomenon is more common. So how do you fix the "footer" section of a Web page at the bottom of the page forever? Note that what is said here is that the footer footer is always fixed at the bottom of the page, not at the bottom of the monitor screen, in other words, when the content is only a little bit, the Web page is displayed at the bottom of the browser, when the content height exceeds the browser height, the footer part of the Web page is at the bottom of the page, in short, the footer part of the Web page is always at the bottom of the page, in other words, the Footer part is always sunk. As shown in the following figure:

So today we will mainly learn how to fix the footer at the bottom of the page.

Method one

First, let's look at the first method, which comes from Matthew James Taylor's "How to keep footers atthe bottom of the page". Let's take a look at the methods introduced by Matthew James Taylor.

HTML Markup

The code is as follows:

Header Section

Page capacity section

Footer Section

In fact, we can add the required content structure in div#page, as follows:

The code is as follows:

Header Section

Left Sidebar

Main content

Right sidebar

Footer Section

Really, to achieve this footer is always fixed at the bottom of the page, we only need four div, where div#container is a container, in which we include div#header (header), div#page (page body, we can add more div structures to this div, as shown in the code above), div#footer (footer)

CSS Code

The code is as follows:

Html,body {

Margin: 0

Padding:0

Height: 100%

}

# container {

Min-height:100%

Height: auto! important

Height: 100%; / * IE6 does not recognize min-height*/

Position: relative

}

# header {

Background: # ff0

Padding: 10px

}

# page {

Width: 960px

Margin: 0 auto

Padding-bottom: 60pxbank * equals the height of footer * /

}

# footer {

Position: absolute

Bottom: 0

Width: 100%

Height: 60pxram * height of the foot * /

Background: # 6cf

Clear:both

}

/ * = main content part = * /

# left {

Width: 220px

Float: left

Margin-right: 20px

Background: lime

}

# content {

Background: orange

Float: left

Width: 480px

Margin-right: 20px

}

# right {

Background: green

Float: right

Width: 220px

}

Let's take a look at how this approach works:

1. And tags: the height must be set to "100%" in the html and body tags so that we can set the percentage height on the container and remove both the margin and padding of html,body, that is, the margin and padding of html,body are both 0

2.div#container container: div#container container must be set to a minimum height (min-height) of 100% This mainly enables him to maintain a height of 100% with little or no content, but min-height is not supported in IE6, so in order to be compatible with IE6, we need to do some compatibility with min-height, as shown in the previous code, or read Min-Height Fast Hack to learn how to solve min-height 's bug problem under Ie6. In addition, we also need to set a "position:relative" in the div#container container so that the elements in it will not run away from the div#container container after absolute positioning.

3.div#page container: div#page this container has a key setting. You need to set a padding-bottom value on this container, and this value should be equal to (or slightly greater than) the height value of the footer div#footer. Of course, you can use border-bottom human water-width instead of padding-bottom in div#page, but it is important to note that you must not use margin-bottom instead of padding-bottom here. Otherwise, the effect will not be achieved.

4.div#footer container: the div#footer container must be set to a fixed height, which can be px (or em). The div#footer also needs to be absolutely positioned, and the bottom:0; is set so that the div#footer is fixed at the bottom of the container div#container, so that the effect we mentioned earlier can be achieved. When the content is only a little bit, the div#footer is fixed at the bottom of the screen (because div#container sets a min-height:100%), and when the content height exceeds the height of the screen, the div#footer is also fixed at the bottom of the div#container, that is, at the bottom of the page. You can also add a "width:100%" to div#footer so that it can be extended throughout the page

5. Other div: other containers can be set up according to their own needs, such as the previous div#header,div#left,div#content,div#right.

Advantages:

The structure is simple and clear, without js and any hack can achieve compatibility under various browsers, and also adapt to iphone.

Disadvantages:

The deficiency is that you need to set a fixed height for the div#footer container, which can be set according to your needs, the unit can be px or em, and the padding-bottom (or border-bottom-width) setting size of the div#page container is equal to (or slightly greater than) the height of div#footer in order to function normally.

The above is Matthew James Taylor describes how to achieve the footer is always fixed at the bottom of the page, if you are interested can read the original text, you can also click here to view Demo.

Method 2:

This method uses the negative value of margin-top of footer to achieve the effect that footer is always fixed at the bottom of the page. Let's take a look at how to achieve it.

HTML Markup

The code is as follows:

Main Content

Footer

The above code is the most basic HTML Code, and you also found that div#footer and div#container are siblings, unlike method 1, div#footer is inside the div#container container. Of course, you can also add content to the div#container container according to your needs, such as a three-column layout with a header section, please see the following code:

The code is as follows:

Header Section

Left sidebar

Main content

Right sidebar

Footer section

CSS Code

The code is as follows:

Html

Body {

Height: 100%

Margin: 0

Padding: 0

}

# container {

Min-height: 100%

Height: auto! important

Height: 100%

}

# page {

Padding-bottom: 60pxram * height equals to height of footer * /

}

# footer {

Position: relative

Margin-top:-60pxbank * equals the height of footer * /

Height: 60px

Clear:both

Background: # c6f

}

/ * = other div=*/

# header {

Padding: 10px

Background: lime

}

# left {

Width: 18%

Float: left

Margin-right: 2%

Background: orange

}

# content {

Width: 60%

Float: left

Margin-right: 2%

Background: green

}

# right {

Width: 18%

Float: left

Background: yellow

}

Method 1 is exactly the same as method 2. For example, the three points 1-3 in method 1 are all the same in method 2. In other words, method 2 also needs to set the html,body height to 100% and reset margin,padding to 0. Second, div#container also needs to set min-height:100%, and deal with the min-height compatibility under IE6. Third, you also need to set a padding-bottom or border-bottom-width value on the div#page container equal to the div#footer height value (or slightly greater). So the differences between the two methods are:

1.div#footer is placed outside the div#container container, that is to say, the two are sibling. If you have a new element that needs to be placed at the same level as the div#container container, you need to position this element absolutely, otherwise it will destroy the min-height value of the div#container container.

2.div#footer sets a negative value for margin-top, and this value is equal to the height value of div#footer, and is also equal to the padding-bottom (or border-bottom-width) value of the div#page container.

Advantages:

The structure is simple and clear, and it can be compatible with all browsers without js and any hack.

Disadvantages:

To set a fixed value for the footer, it is not possible to make the footer part of the adaptive height.

If you are interested in this method, you can also browse "CSS Sticky Footer" and "Pure Css Sticky Footer", or click Demo to view the source code.

Method 3:

There are many ways to achieve the footer is always fixed at the bottom of the page, but there are many methods that need to use some hack or with the help of javaScrip to achieve, then the next method three, only use 15 lines of style code and a simple and clear HTML structure to achieve the effect, and strong compatibility, among other things, look at the code first.

HTML Code

The code is as follows:

Your Website content here.

Footer Section

The above is the most basic HTML Markup, of course, you can also add new content, but it is important to note that if you add content outside the div#container and div#footer containers, the new elements need to be absolutely located. For example, you can add the elements you need for your page to the div#container container

HTML Code

The code is as follows:

Header Section

Left sidebar

Main Content

Right Content

Footer Section

CSS Code

The code is as follows:

Html

Body {

Height: 100%

Margin:0

Padding:0

}

# container {

Min-height: 100%

Height: auto! important

Height: 100%

Margin: 0 auto-60px. The negative value of footer is equal to the height of PMMA * /

}

.push

# footer {

Height: 60px

Clear:both

}

/ * other div effects = * /

# header {

Padding: 10px

Background: lime

}

# left {

Width: 18%

Float: left

Margin-right: 2%

Background: orange

}

# content {

Width: 60%

Float: left

Margin-right: 2%

Background: green

}

# right {

Width: 18%

Float: left

Background: yellow

}

# footer {

Background: # f6c

}

Compared with the previous two methods, method 3 is more similar to method 2, they all put div#footer outside the div#container container, and this method also adds a div.push in the div#container container to push div#footer down. Let's take a look at how this method makes the footer always fixed at the bottom of the page.

1. And tags: the html,body tag is the same as the first two methods, you need to set "height:100%" and reset "margin" and "padding" to 0

2.div#container: the three key parts of the method lie in the setting of div#container. First of all, you need to set its minimum height (min-height) to 100%. In order to be compatible with IE6, you need to be compatible with min-height (see the previous or code). In addition, there is a key point that you need to set a margin-bottom on the div#container container and give it a negative value, and the value is equal to the height of div#footer and div.push. If div#footer and div.push set the padding and border values, then the negative margin-bottom values of div#container need to be added with the padding and border values of div#footer and div.push. That is, "div#container {margin-bottom:- [height+padding+border of div#footer] or-[height+padding+border of div.push]}". In a word: the negative value of margin-bottom for div#container needs to be highly consistent with that of div#footer and div.push (if there is padding or border, the height value needs to be added)

3.div.push: we should not put anything in the div.push, and the div must be placed in the div#container container, and at the bottom, and need to set its height value equal to the div#footer value, it is best to add clear:both to clear the float. What the div.push container does here is to push the footer down.

4.div#footer container: like method 2, the div#footer container cannot be placed inside the div#container, but at the same level as the div#container container. If you need to set the spacing between the element and the footer, it is best to use padding instead of the margin value.

Advantages:

Simple, easy to understand, compatible with all browsers.

Disadvantages:

Compared with the previous two methods, one more div.push container is used. Similarly, this method limits the partial height of footer and cannot achieve the effect of adaptive height.

If you want to know more about method 3, you can click here or download the code directly from DEMO to study for yourself.

Method 4:

The first three methods we do not need any javaScript or jQuery help, let us achieve the effect that the footer is always fixed at the bottom of the page, although the first three methods do not use help such as jQuery, but we all add additional HTML tags to achieve the effect. If you omit these HTML tags, and then it is more difficult to achieve the effect, then using jQuery or javaScript method to help achieve is a good way, let's take a look at the fourth method, through jQuery to achieve the footer is always fixed at the bottom of the page effect.

HTML Markup

The code is as follows:

Header Section

Left sidebar

Main Content

Right Content

Footer Section

We don't add useless HTML tags here, and you can add content to the body at any time, just make sure that the div#footer is at the end of the body.

The code is as follows:

Footer Section

CSS Code

The code is as follows:

* {margin: 0 position paddingVR 0;}

.clearfix: before

.clearfix: after {

Content: ""

Display:table

}

.clearfix: after {

Clear:both

}

.clearfix {

Zoom:1; / * IE

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.