J'essaie de créer un div qui aura une largeur fixe et une hauteur flexible, here est l'image que je veux utiliser pour l'arrière-plan. La chose est quand j'ai div plus grande que la hauteur de l'image les coins arrondis inférieurs sont omis et aussi si j'ai div moins que la taille de l'image même chose, comment puis-je faire ce travail avec des coins arrondis avec toutes les tailles? Mercicréation div avec largeur fixe et hauteur flexible
Utilisez simplement un fond de votre image, d'autres avec un style de bordure.
<div style="padding-bottom:20px; width:303px; background: url('http://i48.tinypic.com/wvvhbr.png') left bottom no-repeat;">
<div id="myContent" style="border: 1px solid #ccc; border-bottom:none;">
Some Content
</div>
</div>
Si vous avez besoin d'une frontière ronde au sommet, il suffit d'ajouter le style « fond » pour #myContent avec Aligner en haut et une autre image.
Positionnez l'image d'arrière-plan en bas et ajoutez un peu de rembourrage au bas de la div pour que les coins s'y inscrivent. Rendez l'image bg vraiment haute.
"Rend l'image bg vraiment haute." - Cet étui fonctionne aussi bien pour les divs de faible hauteur que pour les gros? –
Et aussi .. divs sont générés dynamiquement, comment vais-je savoir quel padding à utiliser à chaque fois? –
oui et ajouter une classe à la div - le rembourrage devrait être le même à chaque fois – matpol
utilisant background-position vous assurer d'avoir toujours des coins arrondis:
CSS:
background-position:bottom;
Vous devez créer une image qui a beaucoup de hauteur supplémentaire de sorte que si le div ne finir par être plus grand que prévu, vous avez toujours de la place pour jouer avec.
Une autre option consisterait à diviser la div en 2 divs séparés - 1 en tant que section de contenu principal, l'autre ajoutant simplement les coins incurvés en bas. Cela vous permettra d'utiliser une image de fond haute 1px pour la div principale, et une image 20px (ish) pour l'image de la bordure incurvée, ce qui réduit la taille du fichier un peu. J'ai joint un exemple pour vous: Download Example
Cela fonctionne totalement .. merci –
N'oubliez pas de couper votre image, laissez juste la partie inférieure. Nous sommes les bienvenus. – Coyod