CSS: Ensemble div hauteur pour remplir div parent, sans position: abolute;

J'ai (encore) le problème de l'adaptation d'un enfant <div> de l'étiquette de la taille de son parent taille. Le parent de l'élément est contrôlé par un autre script (ne veux pas la toucher) et peut être placé n'importe où sur l'écran avec la variable de la hauteur/largeur. Dans mon exemple ci-dessous c'est la #container. Je voudrais mettre une certaine mise en page en elle, qui a une certaine variable et certaines dimensions fixes:

  • un pied de page (ici: #footer), ayant une hauteur fixe (par exemple 100px) et remplit toute la largeur de la mère
  • une barre de navigation sur la gauche (ici: #left), avoir une largeur fixe (par exemple, de 150px) et remplit la totalité de la hauteur de la partie supérieure
  • d'un contenu de la partie droite de la barre de navigation, c'est juste le reste de l'espace.

J'ai trouvé une solution pour le "pied de page", qui fonctionne réellement (Faire un div remplir la hauteur du reste de l'espace à l'écran -> la publication par " daniels). Mais je ne pouvais pas atteindre la #left partie à remplir la totalité de la hauteur.

Ci-dessous mon code d'exemple (Version en Ligne: http://worldtalk.de/v2013/test.html, il ne va pas rester en ligne pour toujours!):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Title</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <style type="text/css" media="screen">
    * {  margin: 0; }
    html, body { height: 100%; }
    #container {
        position: absolute; /* have no control over that container element */
        width: 400px;  height: 300px;
        top: 100px;    left: 10px;
        background: red;
    }
    #upper {
        min-height: 100%;
        height:     auto !important;
        height:     100%;
        margin:     0 auto -100px; /* -100px being the size of the footer */
    }
    #footer {
        background: green;
        height: 100px;
    }
    #left {
      background: yellow;
      float: left; width: 150px;

      /* the following CSS doesn't do what I want... */

      min-height: 100%;
      height:     auto !important;
      height: 100%;
    }
    </style>
</head>
<body>
    <div id="container">
      <div id="upper">
        <div id="left">left - shall reach down until footer</div>
        content part...<br> shall be next to it...
      </div>
      <div id="footer">footer</div>
    </div>
</body>
</html>

Toutes les idées pour y parvenir sans l'aide de JavaScript?

Ce qui concerne,
Stefan

utilisation fixe min-height valeur, pas de pourcentage
Je ne sais pas le besoin de la hauteur... Dans l'exemple c'est clairement 300px-100px = 200px (parent-height moins footer-height). Mais cette taille est dynamique.... il peut changer d'un moment à l'autre.

OriginalL'auteur SDwarfs | 2013-02-11