Div avec px+em+% = div parent à 100%?

Bonjour,

Cela fait quelques jours que je ressasse ce problème dans tous les sens, sans voir de solution.

J'essaye d'y intégrer un "panel" à mon site web. Le problème arrive quand le titre du panel est défini en em, qu'il y a des borders en px, et que le contenu du panel doit faire pile ce qu'il faut pr faire 100% du parent à la fin.

Donc shématiquement une structure dans ce style:

<div class='panel'>
<div class='panelTitle' height='1em' border-bottom=2px>XXX</div>
<div class='content' height='???' border=3px;>....</div>
</div>

En résumé, comment faire pour que mon div panel fasse exactement la taille du parent?

Merci d'avance,
Jean-Hugues

Bonjour,

Pas sûr d'avoir compris la description de ton problème. Tu veux que div.content fasse la hauteur de div.panel moins celle de div.panelTitle?

Si c'est le cas, ça n'est pas possible en CSS. Tu peux à la rigueur le faire en Javascript.

Mais quelle contrainte de design t'oblige à figer en hauteur div.panel, à figer en hauteur div.panelTitle, et à avoir un div.content qui prend toute la place restante? Est-ce qu'on pourrait avoir un aperçu du design à réaliser pour ces éléments?

Merci pour ta réponse florent, malheureusement le site est en local. Mais j'ai fait une capture.
.

Tu verras que le titre panel est pour le moment défini en %, et les borders en px, ce qui fait qu'en cas de redimensionnement, ca ne donne pas des masses.

L'idée du design est de mettre des scroll bar dans les panel et non pas utiliser ceux du navigateur, histoire d'avoir toujours les barres de statuts (avec menu déroulant) disponible à l'écran.

Merci d'avance, mais je penses, comme tu le présumes, que je vais devoir regarder au javascript