CSS: hauteur- remplir le reste de div?

Question

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. un simple div # sidbar il fait normalement environ 1024px de haut, mais la hauteur change dynamiquement en raison de son contenu.

donc nous allons imaginge 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 le reste div # pour remplir le reste de la barre latérale jusqu'à ce qu'il atteigne le fond de la div # barre latérale. Est-ce possible avec des css purs?

Answer 1

Qu'est-ce que vous voulez est quelque chose comme 100% - 200px mais CSS ne supporte pas des expressions telles que celles-ci. IE a une fonctionnalité "expressions" non standard, mais si vous voulez que votre page fonctionne sur tous les navigateurs, je ne vois pas de moyen de le faire sans JavaScript. Alternativement, vous pouvez faire en sorte que tous les div utilisent des hauteurs de pourcentage, de sorte que vous pourriez avoir quelque chose comme 10% -10% -80%.

Mise à jour: Voici une solution simple utilisant JavaScript. Chaque fois que le contenu change dans votre barre latérale, 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

Essayez

height: 100%; 

ou

height: auto; 

Answer 3

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

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

.widget 
{ 
height: 100px; 
} 

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

Answer 4

vous pouvez le faire avec des balises div imbriquées. vous en avez un qui spécifie la largeur à gauche, puis un autre laissé vide. Pour remplir le reste de l'autre côté, vous imbriquez une div relative à 100% à l'intérieur du div côté droit. comme ceci:

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

Answer 5

je suis tombé sur cette question en cherchant une réponse à une question similaire, et je pensais que je calc illustrerai. À partir de ce post, calc n'est pas encore pris en charge cross-browser; Toutefois, vous pouvez vérifier this link here pour voir si vos navigateurs cibles sont pris en charge. J'ai modifié le cas hypothétique de matt pour utiliser calc en an example on jsFiddle. Essentiellement c'est 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.

Answer 6

Je propose la table-élément comme une alternative:

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