comment masquer une barre de défilement verticale lorsqu'elle n'est pas nécessaire

J'ai un textarea qui est contenu dans un div car j'ai un indice jquery et je voulais utiliser l'opacité sans changer la bordure. Il y a une barre de défilement verticale visible comme je veux que cela ne s'affiche que lorsque je tape dans le champ de texte et que cela dépasse le conteneur. J'ai essayé le débordement: auto; mais ne fonctionne pas.

Champ de texte:

<label>
    <div id="name">
        <textarea name="message" type="text" id="message"
            title="Enter Message Here"
            rows=9 cols=60 maxlength="2000"></textarea>
    </div>
</label>

Modes:

#name { 
    border: 1px solid #c810ca;
    width: 270px;
    height:159px;
    overflow: hidden; 
    position: relative;
    }

#message {
    height: 400px;
    width: 235px;
    overflow: hidden;
    position: absolute;
}

overflow: auto(ou overflow-y: auto) est la bonne voie à suivre.

Le problème est que votre zone de texte est plus grande que votre div. Le div finit par couper la zone de texte, donc même s'il semble qu'il devrait commencer à défiler lorsque le texte est plus grand, 159pxil ne commencera pas à défiler tant que le texte n'est pas plus grand que 400pxla hauteur de la zone de texte.

Essayez ceci: http://jsfiddle.net/G9rfq/1/

J'ai mis overflow: auto sur la zone de texte et ai fait la zone de texte de la même taille que le div.

De plus, je ne pense pas qu'il soit valide d'avoir un divinside a label, le navigateur le rendra, mais cela pourrait provoquer des trucs géniaux. De plus, votre divn'est pas fermé.

overflow: auto;ou overflow: hidden;devrait le faire je pense.

Ajouter cette classe dans la classe .css

.scrol  { 
font: bold 14px Arial; 
border:1px solid black; 
width:100% ; 
color:#616D7E; 
height:20px; 
overflow:scroll; 
overflow-y:scroll;
overflow-x:hidden;
}

et utilisez la classe dans div. comme ici.

<div> <p class = "scrol" id = "title">-</p></div>

J'ai joint l'image, vous voyez la sortie du code ci-dessus