CSS: hauteur- remplir le reste de div?

Question

Je me demande si cela est possible avec des CSS simples ou si je dois utiliser javascript pour cela?

J'ai une barre latérale sur mon site web. un simple div # sidbar a normalement une hauteur d'environ 1024 pixels, mais la hauteur change de façon dynamique en raison de son contenu.

alors imaginons le cas suivant:

 <div id="sidebar">
   <div class="widget"></div> //has a height of 100px
   <div class="widget"></div> //has a height of 100px
   <div id="rest"></div> //this div should have the rest height till to the bottom of the sidebar
</div>
 

Je veux que le repos div # remplisse le reste de la barre latérale jusqu'à ce qu'il atteigne le bas de la barre latérale div #.

est-ce possible avec du css pur?

Answer 1

Ce que vous voulez, c'est quelque chose comme 100% - 200px mais le CSS ne prend pas en charge les expressions telles que celles-ci. IE a un non-standard "expressions", mais si vous voulez que votre page fonctionnent sur tous les navigateurs, je ne vois pas le moyen de le faire sans JavaScript. Sinon, vous pouvez faire toute la divs pourcentage d'utilisation hauteurs, de sorte que vous pourriez avoir quelque chose comme 10%-10%-80%.

Mise à jour: Voici une solution simple à l'aide de JavaScript. Chaque fois que le contenu dans votre barre latérale des modifications, il suffit d'appeler cette fonction:

function resize() {
  // 200 is the total height of the other 2 divs
  var height = document.getElementById('sidebar').offsetHeight - 200;
  document.getElementById('rest').style.height = height + 'px';
};

Answer 2

Je propose l'élément table comme alternative:

• +: CSS propre
• +: éviter le javascript
• -: table mal utilisée sémantiquement
• -: pas les éléments div demandés

Answer 3

Je suis tombé sur cette question alors que la recherche d'une réponse à une question similaire, et je pensais que je voudrais illustrer calc. Comme de ce post, calc n'est pas encore prise en charge de la croix-navigateur; toutefois, vous pouvez vérifier ce lien ici pour voir si votre cible les navigateurs sont pris en charge. J'ai modifié matt cas hypothétique d'utiliser calc dans un exemple sur jsFiddle. Essentiellement, c'est un pur CSS solution qui fait quoi casablanca propose dans sa réponse. Par exemple, si un navigateur supporte calc, alors height: calc(100% - 200px); serait valable aussi bien que pour des propriétés semblables.

Answer 4

vous pouvez le faire avec des balises div imbriquées. vous en avez un en spécifiant la largeur à gauche, puis un autre en blanc. Pour remplir le reste de l'autre côté, vous insérez une division de 100% relative à l'intérieur de la division de droite. ainsi:

 <div style="width:100%">
  <div style="width:300px;background-color:#FFFF00;float:left">
  </div>
  <div style="margin-left:300px">
    <div style="position:relative;left:0px;width:100%;background-color:#00FFFF">
    </div>
  </div>
</div>