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

What this article shares with you is about the high degree of self-adaptation of DIV and the problems that should be paid attention to. The editor thinks it is very practical, so I share it with you. I hope you can get something after reading this article. Without saying much, let's take a look at it.

We will focus on the DIV high adaptation and attention problems, including two situations: the height of the parent div changes with the height of the child div and the height of the child div changes with the height of the father div.

DIV is highly adaptive and pays attention to problems.

Accumulated some experience, summed up some highly adaptive skills about div, hope to help you, reprint please indicate the source, thank you.

1. DIV highly adaptive (the height of the parent div changes with the height of the child div)

1. If the parent div does not define height and the child div is a standard stream, the height of the parent div changes with the content, and the height of the parent div changes with the height of the child div.

Code:

# aa {border:#000000solid5px} # bb {border:#00ffffsolid5px;} # cc {border:#0033CCsolid5px} style > parent div child divdiv > child divdiv > div >

Effect: consistent under IE and FF

2. If the parent div defines height and the child div is a standard stream, the height of the parent div changes with the content under IE, and the size is fixed in ff, for example, the parent div sets the height:50px

Code:

# aa {border:#000000solid5px;height:50px} # bb {border:#00ffffsolid5px;} # cc {border:#0033CCsolid5px} style > parent div child divdiv > child divdiv > div >

IE effect

Effect under FF

3. If the child div uses the float attribute and is out of the standard stream, the parent div will not change with the height of the content. The solution is to add an empty div under the floating div and set the clear attribute both.

The div code is not empty:

# aa {border:#000000solid5px;} # bb {border:#00ffffsolid5px;float:left} # cc {border:#0033CCsolid5px;float:left} style > parent div child divdiv > child divdiv > div >

IE effect:

FF effect:

Modified code:

# aa {border:#000000solid5px;} # bb {border:#00ffffsolid5px;float:left} # cc {border:#0033CCsolid5px;float:left} style > parent div child divdiv > child divdiv > div > div >

Modified effect: IEFF is consistent

4. Alternative DIV is highly adaptive

Principle:

The padding-bottom lengthens the column to the same height, while the negative margin-bottom brings it back to where it started at the bottom, while the overflow is hidden. This method must add document information before it can be displayed properly.

Code:

# aa {border:#000000solid5px;overflow:hidden;} # bb {border:#00ffffsolid5px;float:left; padding-bottom:100000px;margin-bottom:-100000px;} # cc {border:#0033CCsolid5px;float:left; padding-bottom:100000px;margin-bottom:-100000px;} # dd {float:left} style > Sub divdiv > div >

Effect:

2. DIV highly adaptive (the height of the child div changes with the height of the father's div)

In the case of a frame, you will find that the height of the same div under IE is different from that under FF. For example, if you set the height of div with the height of 100px, the border is the height of border:5px;IE and the height of the blank area = 100px, while the div of the height of 100px under FF does not include the height, but only the height of the blank area. The black box is shown below:

The top of the black box is aligned, but if you set the same height, the effect is different. The code is as follows:

# aa {border:#000000solid5px;height:100px;} # bb {border:#00ffffsolid5px;float:left;height:100%} # cc {border:#0033CCsolid5px;float:left} style > Sub divdiv > Sub divdiv > div >

If the border is not set, there is no high degree of inconsistency, the child div is very simple to adapt to the parent div, such as the above code, just add the height:100% attribute to the child div. If you set the border, you can set the height of the child div to a value lower than the height of the upper and lower borders of the parent div. For example, in this case, you can change the height in # bb to 100-5-5=90px, and the results are consistent in IE and Mozilla.

It should be noted that if the parent div is body, that is to say, a body covers a div to make the div fit the size of the body, the height of the body must be set to realize that the child div changes with the body, body {height:100%}

The above are the highly adaptive DIV and the problems that should be paid attention to. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

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.