Readers of colorandy raised the following question about page layout:
"If there is a footer layer, I want it to appear at the bottom of the entire page without changing the content of the page, what should I do in CSS? For example, it contains some copyright information. Because I have less content on the whole page, footer is always following the content above, which is very bad ."
It is not difficult to use table layout in the past. You only need to set the table height of the outermost layer of the page to 100%. However, in the standard Web specification, the height of a table is abolished and should be avoided. After the Web standard is used, table layout is not promoted, is there a way to use CSS to fix the footer of a page at the bottom of the browser?
The following describes how to implement it.
Basic IdeasFirst, consider setting a container div with the id set as # container so that its height is the height of the browser window. Then, set the # footer div to the # container sub-div, and use the absolute positioning method to fix it to the bottom of # container to achieve the desired effect.
Click here to view the results of the case page. Change the height and width of the browser to see the effect of Footer.
Code ImplementationThe following describes the HTML structure. The HTML code of this demo page is very simple.
123456789101112 |
<Body> <div id = "container"> <div id = "content"> |
Then set CSS,
123456789101112131415161718192021222324252627 |
body,html {margin: 0;padding: 0;font: 12px/1.5 arial;height:100%;}#container {min-height:100%;position: relative;}#content {padding: 10px;padding-bottom: 60px; /* 20px(font-size)x2(line-height) + 10px(padding)x2=60px*/}#footer {position: absolute;bottom: 0;padding: 10px 0;background-color: #AAA;width: 100%;}#footer h1 {font: 20px/2 Arial;margin:0;padding:0 10px;} |
1: first, set the height (height attribute) to 100% (5th rows) for the html and body elements to ensure that the height of the root element fills the entire browser window, then, the height of # container can fill the entire browser window.
The reason why html and body elements are set at the same time is that Firefox and IE think the root elements are different, so they are set here.
2: Set the height of # container to 100% (8th rows), but note that the "min-height" attribute is used here, instead of the normal height attribute, this is because we need to consider that if the content in # content increases and the height of the content exceeds the height of the browser window, if the height of # container is still 100%, as a result, # footer is still located at the lower end of the timer window, thus overwriting the content in # content.
The min-height attribute is used to make the height of # container "at least" the height of the browser window. If the content in it is increased, his height will also increase, which is what we need.
However, in Firefox and IE7, the min-height attribute is supported, whereas in IE6, the min-height attribute is not supported. However, in IE 6, the min-height attribute is interpreted as the height attribute, but the effect of the height attribute in IE 6 is what min-height should have, that is, in IE 6, the height of the sub-div is the height of the parent div. So we can achieve the expected results in IE6, IE7, and Firefox.
3: Next, set # container to relative positioning (row 9th) to make it the # footer positioning benchmark in it, that is, the so-called "ancestor elements recently located ".
4: Set # foooter to absolute positioning (row 17th) and paste it at the bottom of # container (row 18th ).
5: however, if we stick # foooter at the bottom of # container, it will actually overlap with the # content div above, to avoid overwriting the content in # content, we set the bottom padding in # contetn so that the value of padding-bottom is equal to the height of # footer (13th rows ), this ensures that the # content text is not overwritten. Therefore, pay attention to the calculation method (14th rows) given in the comments in the code ).
6: there is no more technical explanation for the rest. If the reader does not fully understand the above explanation, it means that you do not know enough about the basic concepts of CSS. First, carefully understand the core principles and basic concepts of CSS, it's easy to look at the code.
Click here to view the results of the case page.
Case SummaryThis seemingly not complex code involves many core CSS concepts and principles, so here we return to the suggestions we have given readers for many times: the core principles of CSS must be clarified in a down-to-earth manner, especially the four core cornerstones of CSS: Box Model, standard stream, floating, and positioning. Only by keeping these core foundations familiar with your chest can you design them with ease.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
