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

What are the three common methods to solve the high adaptability of div columns in CSS? aiming at this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

Let's introduce three common ways to solve the problem of div column height adaptation, namely, using "clear:both" background padding, using script to control height, and margin negative parent-child container height inheritance.

CSS skills: three common ways to solve the high self-adaptation of div columns

There are many ways to solve the high degree of adaptability of the div column. Here are three of the most commonly used methods (all of the following examples are parent main, child divleft, and divright).

1. Fill it with "clear:both" background (recommended! )

This is one of the most widely used practices, and I have always used this method to solve the problem of high adaptability of div columns. Three-row and two-column layout, the main content is on the right, the page width 780px, the left column 240px, the right column 540px.

CSS Code:

# main {width: 780px; margin: 0; background: url (bg.gif) # FFFFFF repeat-y left; text-align: left;} # divleft {float: left; width: 240px;} # divright {float: right; width: 540px;} .clear {border-top:1px solid transparent! important; margin-top:-1px! important; border-top:0; margin-top:0; clear:both; visibility:hidden;}

Html Code:

Div > div >

Advantages: no hacks, completely adaptive height.

2. Script control height..

Add the following code in (assuming that the height of divright is relative to * *):

Document.getElementById "divleft"). Style.height = document.getElementById "divright"). ScrollHeight "px" script >

Pros: the code is super simple

Disadvantages: to make sure that the height of a column is always opposite, this method is passive.

3. Margin negative parent-child containers highly inherit

This method can better solve the problem of the same column height. Three-row and two-column layout, the main content is on the left, the page width 780px, the left column 540px, the right column 240px.

CSS Code:

# main {width: 540px; float:left; background:#FFFFFF; text-align:left;} # divleft {width: 540px; float:left; position:relative; margin-left:-540px;} # divright {width: 240px; float: right; position:relative; margin: 0-240px 00; background:# F0F0F0;}

Html Code:

Div > div >! Div >

Perhaps the friends of Web Standards who have just come into contact with do not understand this method, so let's take a look at the Blank analysis:

[A]

[B] [C]

In the upper structure, a contains c and c contains b. When the height of b is * *, then an and c will inherit the height of b, and if the positions of an and b coincide, the background of b will be displayed; while when the height of c is * *, then an inheritance will inherit the height of c, and if the positions of an and b coincide, the background of a will be displayed. This will show that the div column is the same height regardless of whether the bounded columns * or the clocked columns *.

Advantages: it has the advantages of both methods and is slightly simpler than the code of methods.

Disadvantages: the overall structure can only be aligned to the left.

This is the answer to the question about what are the three common methods to solve the highly adaptive div column in CSS. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

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.