як приховати вертикальну смугу прокрутки, коли це не потрібно

У мене є область тексту, яка міститься в div, оскільки я маю підказку jquery і хотів використовувати непрозорість, не змінюючи межу. Існує видима вертикальна смуга прокрутки, як я хочу, щоб це відображалося лише тоді, коли я ввожу текст у текстове поле, і воно виходить за рамки контейнера. Я спробував переповнення: 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. Дів закінчується обрізанням текстового поля, тому, хоча здається, що він повинен розпочати прокрутку, коли текст вищий, ніж 159pxвін не почне прокручуватися, поки текст не буде більшим за 400pxвисоту текстового поля.

Спробуйте це: http://jsfiddle.net/G9rfq/1/

Я встановив переповнення: автоматичне для текстового поля і зробив текстове поле таким же розміром, що і div.

Крім того, я не вважаю, що дійсно мати divвсередині a 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>

Я вклав зображення, ви бачите вихід вищезазначеного коду