Le texte de débordement devrait dynamiquement redimensionner le conteneur

J'ai ajouté une image (c'est une belle forme de chose de type boîte peinte rectangulaire) sur ma page Web. J'ai placé du texte là-dessus.Le texte de débordement devrait dynamiquement redimensionner le conteneur

Maintenant, lorsque je l'ouvre dans des écrans de plus petite résolution, le texte sort de la boîte verticalement. Je veux arrêter cela et faire la boîte de jogging (je veux dire ici div) extensible verticalement selon le texte.

Existe-t-il un moyen simple d'accomplir ceci?

Edit: La balise body va comme ceci

<body> 
<div .class="container"> 
    <img src="pic.jpg" class="pic" alt=""> 
    <h2>some lenghty text</h2> 
</body>

et le CSS va ici

.pic { 
    /* because as the pic is very large and need to center that */ 
    width:40%; 
    margin-right:auto; 
    margin-left:auto; 
    display:block; 
} 

.container { 
    width:100%; 
    margin-right:auto; 
    margin_left:auto; 
    top:200px; 
    position:relative; 
} 

h2 { 
    position:absolute; 
    font-size:20px; 
    font-color:blue; 
}

Donc, avec la pièce au-dessus du code, je ne suis pas réalisais ce que je veux dire si la la longueur du texte augmente (dans certains petits écrans ou lors de la redimensionnement), le conteneur jpg doit être prolongé verticalement sur l'écran afin que le texte se trouve bien à l'intérieur de l'image elle-même

Source

2010-12-30 simple-coder

essayer overflow-y: auto; – Vivek

@Vivek, si elle sort de la boîte, le réglage de débordement ne changera que la façon dont le texte débordant est affiché (ou non affiché). Cela ne provoquera pas l'étirement de la boîte. –

S'il vous plaît utiliser le bouton de code {} ', et prenez une seconde pour lire sur la façon de formater correctement votre question –

Très probablement, le div a reçu une hauteur fixe. Si vous "inspectez l'élément" sur la div en utilisant firebug ou chrome, vous devriez être capable de rechercher la règle CSS qui définit cette hauteur. Ensuite, supprimez cette règle ou remplacez height: par min-height:.

Mise à jour:

Le problème est que la div est en expansion, mais l'image est pas. Jusqu'à ce que la propriété CSS3 background-size est bien pris en charge, vous pouvez simplement régler la hauteur du img à 100%:

img.pic { 
    height: 100%; 
}

Source

2010-12-30 10:52:44

merci box9, mais je dint garder toute balise de hauteur dans css, s'il vous plaît vérifier mon code modifié pour css j'ai utilisé. .. –

@ simple-codeur, je ne vois pas de CSS. Il est également possible que certains javascript définissent la hauteur CSS. La meilleure façon de vérifier consiste à inspecter l'élément dans firebug et chrome (à la fois le panneau latéral CSS et l'attribut inline 'style'). Si vous êtes toujours sûr que la hauteur n'est pas définie quelque part, puis poster du HTML et CSS dans votre question aiderait;) –

désolé box9, je viens d'ajouter maintenant ... pouvez-vous jeter un oeil –

Le texte de débordement devrait dynamiquement redimensionner le conteneur

Répondre

Questions connexes