Use the Web Standard Building Day 10: Adaptive Height

xiaoxiao2021-03-06 45

If we want to add a line foot footage in the 3-column layout, place the copyright. I have encountered problems that must be aligned with the bottom of the 3 column. In the Table layout, we can use a large form of nested small forms. It can be very convenient to three columns; and use the DIV layout, three columns are independently dispersed, and it is difficult to align. In fact, we can completely nested DIV, put the three columns into a DIV, and do the bottom alignment. Here is an implementation example (white background box simulation one page):

The page main code of this example is as follows:

The specific style sheet is written in the corresponding section. The focus is in the #mainbox layer nested # Menu, # sidebar and #content three layers. When #Content's content increases, # Content will increase, and the height of #mainbox will also be opened, and the # Footer layer is automatically moved. This achieves a high degree of adaptation.

Also worth noting is: #menu and #Content are floating on the right side of the page "float: right;", # sidebar is floating on the left "float: left;", this is a floating method, but also Absolute positioning to achieve this effect.

There is another problem with this method, that is, the background of the side #sidebar cannot be 100%. The general solution is to fill in the background color of the body. (You can't use the background color of #mainbox, because the background color of #mainbox in the browser such as Mozilla is invalid.)

Ok, the main frame has been set up, and the rest is just to add bricks in the inside. If you want to try other layouts, recommend to see the following article:

CSS layout 16 cases onestab: three column composite layout demonstration onestab: free stretching three-bar version

Tips: ["P.I.e" topic], there is more exciting introductions, recommend to see.

转载请注明原文地址:https://www.9cbs.com/read-51140.html

9cbs

New Post(0)