CSS Positioning Div Absolute Bottom

CSS Positioning Div Absolute Bottom

Web page Production WEBJX article introduction: The simplicity of CSS is that it is easy to learn, the difficulty of CSS is to find a better solution. In the world of CSS, there seems to be no such statement of perfection. So, now the introduction of the absolute bottom of the CSS, but the current personal see the solution is more perfect it. The simplicity of CSS is that it is easy to learn, and the difficulty of CSS is to find a better solution. In the world of CSS, there seems to be no such statement of perfection. So, now the introduction of the absolute bottom of the CSS, but the current personal see the solution is more perfect it. first of all, why do we use this CSS bottom layout solution: As a page, if the page content is small, not enough to fill the window area of a screen, according to the normal layout, will appear in the image below (that is, the bottom content is not at the bottom of the window, leaving a lot of blank.) It's not beautiful for a designer who is not perfect. There are some solutions on the web, but there are bugs that overlap the bottom and body when you change the height of the window. Although not many people will be fine to change the window height, but design, the pursuit is perfect. Here is a more perfect method I found, from foreign design, pure CSS, can be achieved: when the body content is very small, the bottom of the window is below. When you change the height of the window, there is no overlap problem. Even the person who created the CSS specifically set up a website to introduce this CSS bottom layout scheme. Do not know if he has to apply for patent:) HTML code: <div id= "Wrap" > <div id= "main" class= "Clearfix" > <div id= "Content" > </div> <div id= "Side" > </div> </div> </div> <div id= "Footer" > </div> Description: The premise of using this layout is that footer to the total div container, footer uses a layer, and all other content uses a total layer. If you do need to add another sibling layer, you must use Position:absolute for absolute positioning. Web page Production WEBJX article introduction: The simplicity of CSS is that it is easy to learn, the difficulty of CSS is to find a better solution. In the world of CSS, there seems to be no such statement of perfection. So, now the introduction of the absolute bottom of the CSS, but the current personal see the solution is more perfect it. CSS Code: The following is the main CSS code, so that your bottom can be at the top of the window: HTML, body, #wrap {height:100%;} Body > #wrap {height:auto; min-height:100%;} #main {padding-bottom:150px;}/* must use the same height as footer */ #footer {position:relative; Margin-top: -150px; /* Negative value of footer height */ height:150px; Clear:both;} Note : It should be noted that the padding value of #main, the height of footer, and the negative margin values need to be consistent. It's that simple, but it's not over yet. If your subject is using a floating layout, and you have to solve some browser compatibility issues, the focus here is to Goolge Chrome. The famous Clearfix Hack for the #main part: . clearfix:after {content: "."; Display:block; height:0; Clear:both; Visibility:hidden;} . clearfix {Display:inline-block;} /* Hides from Ie-mac \*/ * HTML. Clearfix {height:1%;} . clearfix {Display:block;} /* End Hide from Ie-mac * * Note: The program is tested in two-column hover layouts that are compatible with major mainstream browsers, including Google Chrome. P.S: the previously well-known footer layout on the network was created by Ryan faits, but its approach would have an empty div layer in the HTML code. Strictly speaking, it does not conform to the semantic Web code standard. In addition, there is an article exploring footers article from a List Apart, but some JavaScript code is used. Such a comparison, the above seemingly simple pure CSS, it appears great many.