jak ukryć pionowy pasek przewijania, gdy nie jest potrzebny

Mam obszar tekstowy, który jest zawarty w div, ponieważ mam wskazówkę jQuery i chciałem użyć krycia bez zmiany obramowania. Jest widoczny pionowy pasek przewijania, w którym chcę, aby był wyświetlany tylko wtedy, gdy piszę w polu tekstowym i wychodzi poza kontener. Próbowałem przepełnienia: auto; ale nie działa.

Pole tekstowe:

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

Style:

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

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

overflow: auto(lub overflow-y: auto) jest właściwą drogą.

Problem polega na tym, że obszar tekstowy jest wyższy niż element div. Element div kończy się odcinaniem pola tekstowego, więc nawet jeśli wygląda na to, że powinien rozpocząć przewijanie, gdy tekst jest wyższy 159px, nie zacznie przewijać, dopóki tekst nie będzie wyższy niż 400pxwysokość pola tekstowego.

Spróbuj tego: http://jsfiddle.net/G9rfq/1/

Ustawiłem overflow: auto w polu tekstowym i sprawiłem, że pole tekstowe ma taki sam rozmiar jak div.

Nie uważam też, że warto mieć element divwewnętrzny a label, przeglądarka go wyrenderuje, ale może to spowodować zdarzenie dziwnych rzeczy. Również twój divnie jest zamknięty.

overflow: auto;lub overflow: hidden;powinienem to zrobić, myślę.

Dodaj tę klasę do klasy .css

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

i użyj klasy w div. jak tutaj.

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

Załączam obrazek, widzicie wyjście z powyższego kodu