身體元素沒有100％高度

有任何想法，爲什麼藍色div沒有設置爲100％？我需要在他棕色footer頂部的藍色div！身體元素沒有100％高度

<!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> 
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15"></meta> 
     <title></title> 

     <style type="text/css"> 
      html, body { 
       height: 100%; 
       width: 100%; 
       padding: 0px; 
       margin: 0px; 
      } 

      div#container { 
       height: 100%; 
       height: auto !important; 
       min-height: 100%; 
       margin-bottom: -50px; 
      } 

      div#header { 
       height: 50px; 
       background: #ba6f19; 
      } 

      div#body { 
       overflow: hidden;     
       height: 100%; 
       background-color: blue; 
      } 

      /* IE6 Fix */ 
      * html div#body { 
       overflow: visible; 
      } 

      div#content { 
       margin:0;     
      } 

      div#footer-push { 
       height: 50px; 
      } 

      div#footer { 
       height: 50px; 
       background: #ba6f19; 
      } 


      /* --- CUSTOM START */ 

      .us{ 
       float:left; 
       width: 100%; 
       min-height:50px; 
       min-width:50px; 
       height:auto; 
       cursor:pointer; 
       text-align:center; 
      } 

      div.cal 
      { 
       width:14.28%; 
       float:left; 
       color:#fff; 
       overflow:hidden; 
       height:100%; 
       min-height:100%; 
       background-color: black; 
      } 

      div.cal_headline 
      { 
       padding-left:3px; 
       position:relative; 
       background-color:#000000; 
       color:white; 
       min-width:100px; 
      } 
     </style> 

    </head> 
    <body> 

     <div id="container"> 

      <div id="header"> 

      </div> 

      <div id="body"> 
       <div id="content"> 

d 

       </div> 
      </div> 

      <div id="footer-push"></div> 
     </div> 

     <div id="footer"> 

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

非常感謝你

來源

2010-09-09 Sandor Farkas

你的意思是100％的高度？它是我測試過的chrome，firefox，opera和ie6的100％寬度。 ie6也有100％的高度。 – 2010-09-09 16:44:24

對於高度的百分比工作，父容器需要一個高度。所以在你的情況下，只需從你的div＃容器中刪除height: auto !important;，這樣它的高度就是100％。

div#container { 
    height: 100%; 
    min-height: 100%; 
    margin-bottom: -50px; 
}

來源

2010-09-09 16:43:35 Larsenal

改變你的CSS這樣

添加這種風格

body{ 
    background-color: blue; 
}

修改這種風格

div#body { 
    overflow: hidden;     
    height: 100%; 
}

來源

2010-09-09 16:42:16 Alex

這裏是解決方案： – 2010-09-09 17:00:05

這是我的解決方案：

HTML，身體{寬度：100％;高度：100％;填充：0; margin：0;} #container {position：relative;身高：100％;寬度：100％;保證金：0汽車;}

 #header, #footer {height: 20px; background: #dad; position: absolute; left: 0; right: 0;} 
     #header {top: 0;} 
     #footer {bottom: 0;} 

     #content {position: absolute; top: 20px; bottom: 20px; left: 0; right: 0; background: #ffc; overflow: auto;} 


     .us{ 
      float:left; 
      width: 100%; 
      min-height:50px; 
      min-width:50px; 
      height:auto; 
      cursor:pointer; 
      text-align:center; 
     } 

     div.cal 
     { 
      width:14.28%; 
      float:left; 
      color:#fff; 
      overflow:hidden; 
      height:100%; 
      min-height:100%; 
      background-color: black; 
     } 

     div.cal_headline 
     { 
      padding-left:3px; 
      position:relative; 
      background-color:#000000; 
      color:white; 
      min-width:100px; 
     } 

    </style> 

    <!--[if lt IE 7]> 
    <style type="text/css" media="screen"> 
    body {text-align: center;} 
    #header, #footer, #content {width: 100%;} 
    #content { 
    text-align: left; 
    height: expression(document.body.offsetHeight - 40 + "px"); 
    } 
    </style> 
    <![endif]--> 


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




     </div> 
     <div id="footer">footer</div> 
    </div> 
</body>

來源

2010-09-09 17:02:39

身體元素沒有100％高度

回答

相關問題