Indefinite height of div background or background picture does not show problems

Source: Internet
Author: User

When using Div+css for Web page layout, if the external div has a background color or border, and does not set its height, it appears normal under IE browser. However, the background color and border of the outermost div does not work when browsing with Firefox/opera.

Gross structure

<style>. A1{width:100px;background:Red;}. B1{background:Blue;width:50px;Height:600px;}
</style></Head><Body><Divclass= "A1"> <Divclass= "B1"></Div></Div> </Body>

Cause analysis: Because in Firefox and opera: If the inside Div is floating (float), the matrix does not calculate the height after the sub-float. And in IE support this calculation, so ie under normal.

So there are two prerequisites for this problem: 1. The external Div does not have a height; 2. The internal div is floating (with the float property).

Generally, we are not sure about the height of the external div, so we want to clear the float.

achieve how the background color or picture grows with the div since it grows.
. A1{width:100px;background:red;height:auto!important;     height:550px;     min-height:550px;}. A1:after {    content: ".";     height:0;     Visibility:hidden;     Display:block;     Clear:both;      }

1. Add code at the end of the DIV:
<div style= "Clear:both;" ></div>

or use

<br style= "Clear:both;"/>

2. Using the after pseudo-class

This approach is to add new content to the parent container using after pseudo-class and content declarations at the end of the specified current content. A common practice is to add a "point" because it is less noticeable. We then use it to clear the floating (closed floating element) and hide the content.

This method is generally compatible, but after a variety of hack can also deal with different browsers, but also to ensure that the HTML is relatively clean, so use is still more.

The code is as follows:
#a1: after{
Content: ".";
height:0;
Visibility:hidden;
Display:block;
Clear:both;
}


3. Set overflow to hidden or auto

This is done by setting the overflow of the parent container to hidden or auot to close the floating element in a standard-compatible browser.

However, when using overflow, it may affect the performance of the page, and this effect is uncertain, you'd better be able to test your page on multiple browsers

4. Floating external elements, float-in-float

This is done by letting the parent container float, which takes advantage of a feature of the floating element-the floating element closes the floating element. This approach has a good effect in both Ie/win and standard-compatible browsers, but the disadvantage is obvious-the parent container may not want to float, after all, the float is a more special behavior, and sometimes the layout does not allow it to float is also very normal.

Indefinite height of div background or background picture does not show problems

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.