10th Day: Adaptive Height _ Basic Tutorial

If we want to add a line footer at the end of the 3 column layout, put the information like copyright. You encounter a problem that must be aligned at the bottom of the 3 column. In table layout, we use a large table nested small table method, it is convenient to all three column, and with div layout, three columns independently dispersed, the content is different, it is difficult to align. We can actually Nest Div, put three columns into a div, and do the bottom alignment. Here is the implementation example (a white background box simulates a page):

Body here is #header{margin:0px; border:0px; BACKGROUND: #ccd2de; width:580px; height:60px;} Here is #mainbox {margin:0px; width:580px; BACKGROUND: #FFF; } contains the #menu, #sidebar和 #content here is #menu{float:right; margin:2px 0px 2px 0px; padding:0px 0px 0px 0px; width:400px; BACKGROUND: #ccd2de; }

Here is #sidebar{Float:left; margin:2px 2px 0px 0px; padding:0px; BACKGROUND: #F2F3F7; width:170px; }, background color with #main background

Here is #content{float:right; margin:1px 0px 2px 0px; padding:0px; width:400px; BACKGROUND: #E0EFDE;}

Here is the main content, automatically adapted to the height of the content

Here is the main content, automatically adapted to the height of the content

Here is the main content, automatically adapted to the height of the content

Here is #footer{Clear:both; margin:0px 0px 0px 0px; padding:5px 0px 5px 0px; BACKGROUND: #ccd2de; height:40px; width:580px; }。

The main code of the page for this example is as follows:

The specific style sheet is written in the appropriate section. The focus is on the #mainbox layer nesting #menu, #sidebar和 #content three layers. When the content of #content increases, #content的高度就会增高, while the height of #mainbox will open, #footer层就自动下移. This allows for a high degree of self-adaptation.

Also noteworthy is: #menu和 #content are floating on the right side of the page "Float:right;", #sidebar是浮动在 the #menu layer to the left "float:left;", this is the floating method positioning, you can also use absolute positioning to achieve this effect.

Another problem with this approach is that the background of the side-column #sidebar cannot be 100%. The general solution is to fill the body with the background color. (You cannot use the background color of #mainbox because the background color of #mainbox in browsers such as Mozilla is invalid.) )

Well, the main frame has been built, and the rest of the work is just a building blocks. If you want to try another layout, it's recommended to look at the following articles:

• CSS Layout 16 examples
• Onestab: Three-column composite layout demo
• Onestab: Free stretch of the three-column layout

Tips:[onestab's "p.i.e" topic] There are more wonderful introduction, recommend to see.

