2014-04-02 53 views
0

我現在面臨的問題,我的DIV的一個content_wrap不採取它的min-height:100%DIV沒有服用最小高度百分比

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <link rel="stylesheet" type="text/css" href="css/main_style.css"> 


    </head> 
    <body> 
     <div id="header"> 

     </div> 
     <div id="center_content_common"> 
      <div id="menu_wrap"> 

      </div> 
      <div id="content_wrap"> 
       <div id="content_block"> 
       </div> 
      </div> 
     </div> 
     <div id="footer"> 

     </div> 
    </body> 
</html> 

CSS

html,body 
{ 
    padding:0px; 
    margin:0px; 
    font-family:"Trebuchet MS", Helvetica, sans-serif; 
    height:100%; 
    width:100%; 
} 
#header 
{ 
    width:100%; 
    height:15%; 
    background-image:url('../images/header_gradient.png'); 
    background-repeat:repeat-y; 
    background-size:100% 100%; 
    border-bottom:3px solid #b8babc; 
} 
#center_content 
{ 
    min-height:79%; 
    height:auto; 
    background-image:url('../images/content_area_gradient.png'); 
    background-repeat:repeat-x; 
    background-size:100% 100%; 
    overflow:auto; 

} 
#center_content_common 
{ 
    min-height:79%; 
    width:100%; 
    height:auto; 
    overflow:auto; 
} 
#content_wrap 
{ 
    min-height:500px; 
    width:84.5%; 
    float:right; 
    background-image:url('../images/content_area_gradient.png'); 
    background-repeat:repeat-x; 
    background-size:100% 100%; 

} 
#content_block 
{ 
    min-height:100%; 
    width:100%; 
    margin:auto; 
} 
#menu_wrap 
{ 
    width:15%; 
    min-height:100%; 
    height:auto; 
    float:left; 
} 
#footer 
{ 
    height:5%; 
    width:100%; 
    background-image:url('../images/footer_gradient.png'); 
    background-repeat:repeat-y; 
    background-size:100% 100%; 
    border-top:3px solid #b8babc; 
} 

什麼可能是我的CSS可能的問題?

+1

[CSS:百分比min-height元素嵌套在百分號min-height元素中]的可能重複(http://stackoverflow.com/questions/10614445/css-percent-min-height-element-nested -within%的-最小高度元件) –

回答

1

height:100%;添加到您的#center_content保證的height:auto。這可能會工作