web-dev-qa-db-fra.com

CSS: hauteur - remplir le reste de div?

je me demande si c'est possible avec un simple css ou si je dois utiliser javascript pour cela?

j'ai une barre latérale sur mon site Web. une simple div # sidbar mesure normalement environ 1024px de haut, mais la hauteur change dynamiquement en raison de son contenu.

imaginons donc 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?

cssheight
34
matt

Ce que vous voulez, c'est quelque chose comme 100% - 200px mais CSS ne prend pas en charge les expressions telles que celles-ci. IE a une fonctionnalité "d'expressions" non standard, mais si vous voulez que votre page fonctionne sur tous les navigateurs, je ne vois pas comment faire cela sans JavaScript. Alternativement, vous pouvez faire tous les div utilisent des hauteurs en pourcentage, vous pouvez donc avoir quelque chose comme 10% -10% -80%.

pdate: Voici une solution simple utilisant JavaScript. Chaque fois que le contenu de votre barre latérale change, appelez simplement 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';
};
7
casablanca

Si vous connaissez la hauteur exacte de #widget (100px dans votre cas), vous pouvez éviter d'utiliser JavaScript en utilisant un positionnement absolu:

#sidebar
{
height: 100%;
width: ...;
position: relative;
}

.widget
{
height: 100px;
}

#rest
{
position: absolute;
left: 0;
width: 100%;
top: 200px;
bottom: 0;
}
35
Jirka

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

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

Je suis tombé sur cette question en cherchant une réponse à une question similaire, et j'ai pensé illustrer calc. À ce jour, calc n'est pas encore pris en charge entre les navigateurs; cependant, vous pouvez vérifier ce lien ici pour voir si vos navigateurs cibles sont pris en charge. J'ai modifié le cas hypothétique de matt pour utiliser calc dans n exemple sur jsFiddle . Il s'agit essentiellement d'une solution CSS pure qui fait ce que casablanca propose dans sa réponse. Par exemple, si un navigateur prend en charge calc, alors height: calc(100% - 200px); serait valide ainsi que pour des propriétés similaires.

4
ricksmt