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.
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
