Position fixe avec la largeur et la hauteur en fonction du contenu (et non 100%)
J'ai un DIV conteneur mis à "position:fixed", qui comprend une autre div en position absolute.
Est-il possible que je peux faire ce inclus div avec la largeur et la hauteur pour ajuster le contenu, et pas toujours à 100%?
C'est ce que j'ai: http://jsfiddle.net/ydSqU/
<div class="transparent_background">
<div id="window">hello.</div>
</div>
C'est ce que je voudrais: http://jsfiddle.net/3BYPu/ (sans avoir à régler manuellement la largeur/hauteur).
<div class="transparent_background">
<div id="window" style="width:30px; height:30px">hello.</div>
</div>
Vous devez vous connecter pour publier un commentaire.
aur0n,
Si possible, la plus simple et la meilleure façon de le faire est d'utiliser javascript pour calculer la hauteur et la largeur des éléments positionner ensuite l'intérieur de l'élément en conséquence.
Pour ce faire, il vous suffit de prendre la largeur de l'élément de conteneur et de le diviser par deux, puis définissez la
left
valeur de l'intérieur de l'élément à ce montant, moins de la moitié de sa propre largeur. Ensuite, faites de même pour la hauteur.Aussi, l'une des choses que vous pourriez avoir oublié, c'est que votre intérieur div doit être mis à
position: relative
etdisplay: inline
. La raison de votre div est d'étirement pour correspondre à la largeur de l'élément conteneur est parce queposition: absolute
prend l'élément de flux normal, tandis queposition: relative
laisse dans le flux normal.Voici le code que j'ai utilisé (à l'aide de jQuery):
Avec cette solution, vous n'avez pas de régler manuellement la largeur et la hauteur. Aussi, pour avoir un intérieur div avec plusieurs lignes de texte ne sera pas un problème.
violon: http://jsfiddle.net/ydSqU/3/
Pouvez-vous essayer de les ci-dessous,
@aur0n modifier le css comme ceci