필요하지 않을 때 세로 스크롤 막대를 숨기는 방법

jquery 힌트가 있고 테두리를 변경하지 않고 불투명도를 사용하고 싶었 기 때문에 div에 포함 된 텍스트 영역이 있습니다. 텍스트 필드에 입력 할 때만 표시되는 세로 스크롤 막대가 있으며 컨테이너를 넘어갑니다. 나는 overflow : 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>

이미지를 첨부했습니다. 위 코드의 출력을 볼 수 있습니다.