內容div未填滿剩餘空間

基本上#content並不服從height：auto屬性。內容div未填滿剩餘空間

我在做什麼錯了？

<!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 runat="server"> 
    <title id="title" runat="server">AMIDS: Advanced Management Information Data Store</title> 
    <style type="text/css"> 
     #container 
     { 
      background-color: White; 
      height: 100%; 
      min-height: 100%; 
      min-width: 600px; 
      width: 100%; 
     } 
     #header 
     { 
      height: 50px; 
      overflow: hidden; 
      width: 100%; 
     } 
     #headerLeft 
     { 
      background-image: url('/Amids/App_Themes/Default/Images/HeaderLeft.jpg'); 
      float: left; 
      height: 50px; 
      width: 5px; 
     } 
     #headerCenter 
     { 
      background-image: url('/Amids/App_Themes/Default/Images/HeaderCenter.jpg'); 
      float: left; 
      height: 50px; 
      width: 99.2%; 
     } 
     #headerRight 
     { 
      background-image: url('/Amids/App_Themes/Default/Images/HeaderRight.jpg'); 
      float: left; 
      height: 50px; 
      width: 5px; 
     } 
     #menu 
     { 
      background-image: url('/Amids/App_Themes/Default/Images/Menu.jpg'); 
      height: 20px; 
      width: 100%; 
     } 
     #content 
     { 
      background-color: Pink; 
      height: auto; 
      width: 100%; 
     } 
     #footer 
     { 
      height: 40px; 
      overflow: hidden; 
      width: 100%; 
     } 
     #footerLeft 
     { 
      background-image: url('/Amids/App_Themes/Default/Images/FooterLeft.jpg'); 
      float: left; 
      height: 40px; 
      width: 5px; 
     } 
     #footerCenter 
     { 
      background-image: url('/Amids/App_Themes/Default/Images/FooterCenter.jpg'); 
      float: left; 
      height: 40px; 
      width: 99.2%; 
     } 
     #footerRight 
     { 
      background-image: url('/Amids/App_Themes/Default/Images/FooterRight.jpg'); 
      float: left; 
      height: 40px; 
      width: 5px; 
     } 
     * html #container 
     { 
      height: 100%; 
     } 
     * 
     { 
     margin: 0; 
     padding: 0; 
     } 
     html, body, form 
     { 
     border: none; 
     height: 100%; 
     } 
    </style> 
</head> 
<body> 
    <form id="form" runat="server"> 
    <div id="container"> 
     <div id="header"> 
      <div id="headerLeft"></div> 
      <div id="headerCenter"></div> 
      <div id="headerRight"></div> 
     </div> 
     <div id="menu"></div> 
     <div id="content"></div> 
     <div id="footer"> 
      <div id="footerLeft"></div> 
      <div id="footerCenter"></div> 
      <div id="footerRight"></div> 
     </div> 
    </div> 
    </form> 
</body> 
</html>

任何想法的人？

來源

2010-03-19 Sameer Shariff

自動已經是默認值。
塊級別元素不會伸展以填充父級的高度。
因此，該div不應該伸展 - 是嗎？（也許看height calculation for block level elements）
這將意味着是是服從height:auto屬性。

也許你可以在頁腳上使用position: absolute; bottom: 10px;來做你想做的事情，也可以在內容上使用position: absolute; bottom: 10px;。
背景可能會很棘手 - 也許你可以給所有的身體提供「粉紅色」的背景，白色的標題和菜單。

來源

2010-03-19 14:10:15 ANeves

內容div未填滿剩餘空間

回答

相關問題