How to solve the problem that Firefox cannot detect the DIV height

ArticleDirectory

• Solution:

Solution to the problem that Firefox cannot detect the DIV height Source: Huang Chao [Click to enlarge]

Page creation is often dominated by browser compatibility, because there are too many browsers. A friend asked me why the height of DIV in Firefox is not self-adaptive when using Div and CSS as pages? Is the background reduced along with the height? In IE, everything works normally. This is because the content in the DIV uses the floating float attribute, so that Firefox does not detect the height, and IE can detect the height normally, so IE and Firefox need to be treated separately. As shown in, the external Div named box contains two divs, left on the Left, left on the left, right on the right, right on the right, CSS and HTML Code As follows: CSS code: 
 
 
 
  
  

    <Style type = "text/CSS"> <! -- Body {font-size: 12px;} # box {Background: # fafafa; Border: 1px solid # dfdfdf; padding: 20px; width: 300px;} # left, # Right {width: 120px; Height: 120px; Border: 1px solid #00a1e9; Background: # ddf4ff; text-align: center; }# left {float: Left ;} # Right {float: Right ;}--> </style> 
  
 
 
 
    HTML code: 
 
 
 
  
  

    <Div id = "box"> <Div id = "Left"> left </div> <Div id = "right"> right </div> 
  
 
 
 
The effects in IE are the same as those in Figure 1, but in Firefox, effect 2 shows that the background is scaled to the top with the height. Solution: There are three solutions to this problem: 1. Add a height to the box Directly add a height attribute to # box in CSS, such as height: 125px ;. The advantage of this method is that it is simple, but the disadvantage is that it does not automatically adapt to the content height.      2. Add a clear floating Element This method is usually to add an element with the clear attribute, and usually add a DIV, for example, add in CSS. clear {clear: Both;}, add <Div class = "clear"> </div> to HTML, as shown in figure 3. The advantage of this method is that it is easy to use, but the disadvantage is that a clear Div should be added to each Div with a float. 3. Use the CSS pseudo element: After Pseudo element: After inserts content at the end of the element content. It can be used to insert a clear floating element after the box. The CSS code is as follows:
 
 
 
  
  

    # Box: After {Height: 0; content: "."; clear: Both; display: block; visibility: hidden ;} 
  
 
 
 
This section of CSS inserts a hidden ". ", it can clear the floating, can play the effect, and IE does not support: After pseudo element, so it has no effect on it. The advantage of this method is that you only need to operate in the CSS Code, without adding any code in the HTML, truly achieving "separation ", the disadvantage is that each ID must add a clear code in CSS, but the disadvantage of this method can be improved by combining the second method above, this evolved the fourth method-combining class and pseudo elements, so that the internal Div with floating is defined by class with clearance attributes. In fact, it is easy to do. First define a class with CSS in the third method. The CSS code is as follows:
 
 
 
  
  

    . Clear: After {Height: 0; content: "."; clear: Both; display: block; visibility: hidden ;} 
  
 
 
 
After writing this CSS, let the class of all Div whose height is removed from the floating effect be clear, for example:
 
 
 
  
  

    <Div id = "box" class = "clear"> <Div id = "Left"> left </div> <Div id = "right"> right </div> </div> 
  
 
 
 
This method can be impeccable. Please feel free to use it! The above three methods can solve the problem that Firefox cannot detect the DIV height. The specific usage depends on your situation and feeling. Here is only for reference and I hope it will help you.