[Résolu] Contenu ne s'adapte pas au conteneur ?

Bonjour tout le monde, je viens juste de m’inscrire car au vu du forum qui m'a déjà dépanné plus d'une fois je suis persuadé qu'il répondra parfaitement à ma nouvelle question.

Alors voila pour simplifier mon problème je dispose de 5 div :

<div id="header"></div>
  
<div id="corps">
    <div id="sidebar">
    </div>
    <div id="content">
    </div>
</div>

<div id="footer"></div>

pour un css de la sorte :

/*************************************/
html {margin: 0;padding: 0;height: 100%;}
body{font: 12px 'Helvetica Neue', Arial,sans-serif;color: #7f7f7f;margin: 0;padding: 0;height: 100%;}
/*************************************/

/*************************************/
#header{
	background-color: #8E3557;
  width: 100%;
	position: relative;
	height: 150px;
}	
/*************************************/

/*************************************/
#corps{
margin-left: auto;
margin-right: auto;
background-color: rgb(0, 47, 47);
height: 100%;
max-width: 1150px;
min-width: 450px;
width: 90%;
}

#sidebar{	
	width: 200px;
	margin: 0 5px 0 13px;
	height: 100%;
	background: #C03000;
	float: left;
	overflow: hidden;
	}

#content{
	padding-top: 2%;
	padding-left: 2%;
	height: 100%;
  }
/*************************************/

/*************************************/
#footer{
	background-color: #8E3557;
	height: 50px;
	position: absolute;
	width: 100%;
}	
/*************************************/

Ma petite structure dois s'adapter en longueur en fonction de la fenêtre, se qu'elle fait très bien par contre si j'ajoute du contenu dans "content" celui si dépasse complètement du cadre vert :

J'aimerais donc que le "content" s'adapte au "corps" ? Je précise que je suis novice et que je bricole plus que je ne code, mais bon faut bien commencer un jour.

Pour vous aider : http://codepen.io/anon/pen/Ljefz

Merci de votre aide
Modifié par woukabougga (03 Nov 2013 - 20:01)

Bonjour woukabougga,

Ma connexion est trop lente pour charger codepen mais à vu de nez: remplace height: 100% par min-height: 100% pour ton #content

#content{
	padding-top: 2%;
	padding-left: 2%;
	min-height: 100%;
  }

tu peut aussi te servir de display:table; pour autoriser ton contenu a s'etirer:
http://codepen.io/anon/pen/sCzIu

Merci pour vos deux réponses, pour le min-height il ne change malheureusement rien,le contenu déborde toujours du contenant.

La solution du faux tableau j'y avais pensé mais du coup je suis plus trop libre de placer ma sidebar comme je l'entends, c'est à dire, pour qu'elle dépasse légèrement vers la droite et ainsi laisser apparaitre une marge à gauche. Sauf s'il y a un moyen de tricher ?

En retirant le height 100% au html, non car la sidebar ne suivrait pas la hauteur du conteneur voire disparaitrait..

Sinon retire les flottements, reste dans le flux, et au mieux utilise table-cell

phpCbien> Je suis pas sur d'avoir tout compris, si je retire le float comment je positionne ma sidebar ? ^^

Sinon j'ai peut être trouvé une solution mais elle me semble peu conventionnelle, j'ai appliqué un min-height:100% à corps se qui à eu pour conséquence d'étendre mon conteneur au contenu. Seulement ma sidebar ne suivais plus j'ai donc appliqué à corps une image cette image de fond :

De ce fait on à l'impression que la sidebar s’adapte bien au contenu et va jusqu'à la fin de page comme je voulais.

Par contre pour le coup j'ai l'impression que je fais du bricolage et que c'est pas la bonne méthode ?

phpCbien> Je suis pas sur d'avoir tout compris, si je retire le float comment je positionne ma sidebar ? ^^

Regarde le lien de gc-nomade

Çà reste la meilleure méthode quand on utilise des valeurs en %

Bonjour à toutes et à tous.

Nul besoin de faire des float ou des positions pour obtenir un gabarit contenant header, footer, nav et aside.

Voici un exemple : http://jsfiddle.net/67xj9/

@+

Merci pour vos réponses et solutions. Je vais donc opter pour la solution table/cell car au vu de vos recommandations ça doit être le mieux.