What do you know about Min-height?

Sometimes we want to set the height of Div 100%. You are more careful when using Min-Height: 100%. However, this may cause a problem.

When the parent height is Min-Height: 100%, the sub-Min-Height: 100% is no longer 100%. Only the parent height is height: 100%, and the sub-Min-height is 100%.

 1   <!  Doctype html  >  2   <  Html  >  3       <  Head  >  4           < Meta  Charset  = "UTF-8"   />  5           <  Title  > PPT </  Title  >  6           <  Script  Type  = "Text/JavaScript"  SRC = "Http://code.jquery.com/jquery-1.7.2.min.js"  > </  Script  >  7           <  Style  Type  = "Text/CSS"  >  8   HTML, body  {  9   Height :  100%  ;  10   Width  :  100%  ;  11   Margin  :  0 ;  12   Padding  :  0  ;  13               }  14   #  {  15   Min-Width :  100%  ;  16   Min-height  :  100%  ;  17               }  18   # B  { 19   Min-height  :  100%  ;  20   Min-Width  :  100%  ;  21               }  22          </  Style  >  23       </  Head  >  24       <  Body  >  25           <  Div  ID  = ""  >  26              <  Div  ID  = "B"  >  27   Test  28               </  Div  >  29           </  Div  >  30       </  Body >  31   </  Html  > 

The result is that a is full and B is not.

Changed to this:

 1   <!  Doctype html  >  2   <  Html  >  3       <  Head >  4           <  Meta  Charset  = "UTF-8"   />  5           <  Title  > PPT </  Title  >  6           <  Script Type  = "Text/JavaScript"  SRC  = "Http://code.jquery.com/jquery-1.7.2.min.js"  > </  Script  >  7           <  Style  Type  = "Text/CSS"  >  8   HTML, body {  9   Height  :  100%  ;  10   Width  :  100%  ;  11  Margin  :  0  ;  12   Padding  :  0  ;  13               }  14  #  {  15   Width  :  100%  ;  16   Height  :  100%  ; 17               }  18   # B  {  19   Min-height  :  100%  ;  20   Min-Width  : 100%  ;  21               }  22           </  Style  >  23       </  Head  >  24       <  Body  > 25           <  Div  ID  = ""  >  26               <  Div  ID  = "B"  >  27   Test  28               </  Div  > 29           </  Div  >  30       </  Body  >  31   </  Html  > 

Result A and B are full.

If you do not set 100%, but set pixels, no problem. Therefore, it is better to use less Min-height.