Hauteur du conteneur parent fixe, enfant à développer/être limité au conteneur parent

Question

J'ai plusieurs conteneurs parents. Il y a beaucoup d'exemples de ceci sur une page. Ils ont des hauteurs différentes.

C'est la hiérarchie des DIVs:

.parent_container 
    |-----> .title 
    |-----> .content 

.parent_container a une hauteur fixe .title prend un peu de la hauteur Je veux .content de prendre le reste de la hauteur ... pas occupé par .title.

Comment ferais-je cela?

Actuellement, j'ai ceci, mais parce que les conteneurs parent sont de hauteurs différentes, les 90% ne fonctionnent pas toujours bien parce que le .title a toujours une certaine hauteur spécifiée par un style H2.

Y a-t-il un moyen en CSS de dire "content height = parent_height - title height"?

/*just an example...different parent_containers have diff heights)*/ 
    .parent_container{ 
    height:530px; 
    } 

    .content { 
    height:90%; /* to make room for title */ 
    overflow:auto; /*show scrollbars*/ 
    } 

Answer 1

Il existe un moyen, dans ce cas, de le faire fonctionner, mais vous devrez ajuster HTML et CSS.

Le changement HTML:

.parent_container 
|-----> .content 
    |-----> .title 
    |-----> .scroll_container 

Le titre va à l'intérieur du contenu. Vous devrez peut-être remplacer certains styles dans .title si .content les affecte.

Ensuite, définissez la hauteur de .content sur 100%. Maintenant, vous devrez peut-être ajuster le CSS sur .title et .content pour le faire fonctionner, en fonction du style, mais cela devrait être faisable. Mettez overflow: auto sur .content_scroller et vous voudrez supprimer ce même style du conteneur .content. .content_scroller peut alors faire défiler le contenu si nécessaire, et le conteneur .content peut représenter 100% de la hauteur du .parent_container.

Answer 2

Il n'y a pas de méthode de calcul courante avec css, bien que calc() soit en cours. Il y a un gros argument qui dit que faire des calculs en css est un cauchemar de parfomance. mais c'est hors sujet. Une solution rapide serait de mettre .title à l'intérieur de .content, et donnant au contenu une hauteur de 100%. vous évitant le besoin de calculer quoi que ce soit.

l'option deux est de calculer cela en utilisant javascript.