2010-03-19 5 views
0

Fondamentalement, #content n'obéit pas à l'attribut height: auto.Contenu div ne remplissant pas l'espace restant

Qu'est-ce que je fais de mal?

<!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> 

Des idées?

Répondre

0

Auto est déjà la valeur par défaut.
Les éléments de niveau bloc ne s'étirent pas pour remplir la hauteur du parent.
Donc, ce div n'est pas censé s'étirer - est-ce? (Peut-être voir height calculation for block level elements)
Ce qui voudrait dire est est obéissant à l'attribut height:auto.

Peut-être que vous pouvez faire ce que vous voulez en utilisant position: absolute; bottom: 10px; sur le pied de page et une marge inférieure sur le contenu.
L'arrière-plan peut être difficile - peut-être que vous pouvez donner un fond "rose" à tout le corps, et blanc à l'en-tête et au menu.

Questions connexes