不要なときに垂直スクロールバーを非表示にする方法

jqueryヒントがあり、境界線を変更せずに不透明度を使用したかったので、divに含まれているtextareaがあります。テキストフィールドに入力しているときにのみ表示される垂直スクロールバーがあり、コンテナーを超えて表示されます。私はオーバーフローを試しました：auto; しかし動作しません。

テキストフィールド：

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

スタイル：

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

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

overflow: auto（またはoverflow-y: auto）が正しい方法です。

問題は、テキスト領域がdivよりも高いことです。divは最終的にテキストボックスを切り取ってしまうため、テキストが背が高くなる159pxとスクロールが開始されるように見えますが、テキストが400pxテキストボックスの高さよりも高くなるまでスクロールは開始されません。

これを試してください：http : //jsfiddle.net/G9rfq/1/

テキストボックスにoverflow：autoを設定し、テキストボックスをdivと同じサイズにしました。

また、div内部にがあることは有効ではないと私は思いlabelます。ブラウザはそれをレンダリングしますが、ファンキーなことが発生する可能性があります。また、あなたdivは閉じていません。

overflow: auto;またはoverflow: hidden;それを行う必要があると思います。

このクラスを.cssクラスに追加します

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

divでクラスを使用します。ここのような。

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

画像を添付しました。上記のコードの出力が表示されます