<div> Extensible sur la hauteur ...

Résolu/Fermé
skuti Messages postés 53 Date d'inscription dimanche 27 septembre 2009 Statut Membre Dernière intervention 29 janvier 2013 - 27 sept. 2009 à 06:02
113pictural Messages postés 457 Date d'inscription jeudi 24 septembre 2009 Statut Membre Dernière intervention 5 octobre 2009 - 27 sept. 2009 à 08:01
Bonjour,

Je suis nouveau en html/css/JS et j'aimerais savoir comment fais t'on pour avoir un div extensible en hauteur.
Je m'explique, j'aimerais que mon div s'agrandisse en fonction du contenu puisqu'un amis va me faire du php pour avoir les contenus qui change sans recharger la page. Et donc je ne sais pas quelle taille ca va avoir.
En faite quand la zone s'agrandis il y a un background d'un pixel de haut qui se "repeat" sur la hauteur.

Alors si quelqu'un pourrais éssayé de m'expliqueren details ce serais sympa ^^
A voir également:

3 réponses

skuti Messages postés 53 Date d'inscription dimanche 27 septembre 2009 Statut Membre Dernière intervention 29 janvier 2013 2
27 sept. 2009 à 07:41
Non bah c'est bon en faite j'ai réussi a le faire.
Je me suis servi de jQuery avec effet ascenseur pour simuler un changement de taille de mon div.
Et puis en effet j'ai mis height: auto;
Mais ce que j'arrivais pas a comprendre c'étais comment faire en sorte que les bordures s'affiche en meme temps. Et bah j'ai pris une image d'un pixel que j'ai fais répeter sur l'axe y.

Je met un petit code test pour ce qui voudrais savoir comment on fais ! :p
Fichier html :
<body>
		
		<div id="conteneur">
			<div id="bareDuHautEtDuBas"></div>
			<div id="bar"></div>
			<div>
				<ul>
					<li>un</li>
					<li>deux</li>
					<li>trois</li>
				</ul>
			</div>
			<div id="bare"></div>
			<div id="bareDuHautEtDuBas"></div>
		</div>
		
	</body>

Fichier CSS :
conteneur{ /* Conteneur principale */
	width:240px;
	height:auto;
	background:url(trait.png) repeat-y;/* C'est ici que l'on met les bordures de 1px de haut et
	d'une largeur definie par vous */
	padding:0;
	margin:0;
}

/*  Genre un truc comme sa:
 
la bare représente une bordure =>    |-------- milieu de la zone --------| 

Et on repete sa sur l'axe y ce qui donne:

                                 |                                               |
                                 |                                               |
                                 |                                               |
                                 |                                               |
                                 |                                               |
                                 |                                               |
                                 |                                               |
                                 |                                               |
                                 |                                               |
                                 |                                               | 
*/

#bareDuHautEtDuBas{/* Les bares qui sont en haut et en bas */
	width:240px;
	height:12px;
	background:url(bas.png) no-repeat;
}

#bar{ /* Premiere bare ( celle du haut ) */ 
	width:220px;
	height:50px;
	background:url(boutonhover.gif) no-repeat;
	margin:0 0 0 10px;
}
#bare{ /* Deuxieme bare ( celle du bas ) */
	width:220px;
	height:50px;
	background:url(boutonrepos.png) no-repeat;
	margin:0 0 0 10px;
}
2
113pictural Messages postés 457 Date d'inscription jeudi 24 septembre 2009 Statut Membre Dernière intervention 5 octobre 2009 53
27 sept. 2009 à 08:01
Woah! ça a l'air super. Je vais essayer pour m'amuser, et m'instruire.
1
113pictural Messages postés 457 Date d'inscription jeudi 24 septembre 2009 Statut Membre Dernière intervention 5 octobre 2009 53
27 sept. 2009 à 07:17
Bonjour,
peut-être qu'en n'écrivant que le <div width="_">, sans le height="_" cela marcherait ...

Non?
-1