DIV qui dépasse

Bonjour à tous,

Mon petit souci par l'exemple : http://codepen.io/anon/pen/qJmnA

J'ai un DIV "frame" noir en position fixed, dont la hauteur varie en fonction du resize de la fenêtre. Je ne connais donc pas sa hauteur.
Ce div contient un header bleu de 30px et une zone content rouge qui doit couvrir la surface restante du div frame.
Mais ce content rouge dépasse, alors que je voudrais qu'il s'arrête à la limite du frame noir.

CSS :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

#frame{ border:2px solid #000000; height:50%; width: 300px; position:fixed; } #Header{ border:1px solid #0000FF; height:30px; width: 300px; } #content{ border:1px solid #FF0000; height:100%; width: 300px; }

---

HTML :

Code:

---

1 2 3 4

<div id="frame"> <div id="Header"></div> <div id="content"></div> </div>

---

J'ai tenté beaucoup de choses, mais sans succès.

Quelqu'un pourrait-il m'aider ? :)

Merci !

Bonjour,

La postion fixed est à utiliser avec parcimonie.

Ça va compliquer les choses dans votre cas; surtout avec une hauteur fixée à 50%, votre contenu débordera.

Il faudra lui donner une hauteur en pixels pour arriver à quelque chose de viable.

Code:

---

1 2 3 4 5

#content{ border:1px solid #FF0000; position:absolute; top:32px;left:0;right:0;bottom:0; }

---

Merci Candy, exactement ce que je souhaitais !
J'aurai appris quelque chose ;)