As the div container grows, the background color or image inside it grows accordingly_HTML/Xhtml_Webpage Production

Copy code

The code is as follows:

height:auto !important;
height:550px ;
min-height:550px;

Add the code at the end of the Div:

Or use




2. Use the after pseudo-class

This method is used on the parent container The after pseudo-class and content declaration add new content to the end of the specified current content. A common approach is to add a "dot" because it is smaller and less noticeable. Then we use it to clear the float (close the floated element) and hide the content.

This method has general compatibility, but it can cope with different browsers after various hacks. At the same time, it can ensure that the html is relatively clean, so it is still used more often.

Copy code

The code is as follows:

#outer:after{
content: ".";
height:0;
visibility:hidden;
display:block;
clear:both;
}

3 .Set overflow to hidden or auto

This method is to set the overflow of the parent container to hidden or auto to close the floating element in a standard-compliant browser.

But when using overflow , may have an impact on page performance, and this impact is uncertain. It is best to test your page on multiple browsers

4. Floating external elements, float-in- float

This approach is to make the parent container float, which takes advantage of a characteristic of floating elements - floating elements will close floating elements. This method has good results in IE/Win and standard-compatible browsers, but the disadvantage is also obvious - the parent container may not float just because it wants to float. After all, floating is a special behavior, and sometimes the layout is not good. Allowing it to float is also normal.