当不需要时如何隐藏垂直滚动条

我有一个文本区域，它包含在一个 div 中，因为我有 jquery 提示，并希望在不改变边界的情况下使用不透明性。 有一个可见的垂直滚动条如何我只希望这显示当我在文本字段和它超出容器。我试过溢出: 自动，但不工作。

文字:

<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;
}
118014 次浏览
小开

overflow: auto; or overflow: hidden; should do it I think.

小开
最佳答案

overflow: auto (or overflow-y: auto) is the correct way to go.

The problem is that your text area is taller than your div. The div ends up cutting off the textbox, so even though it looks like it should start scrolling when the text is taller than 159px it won't start scrolling until the text is taller than 400px which is the height of the textbox.

Try this: http://jsfiddle.net/G9rfq/1/

I set overflow:auto on the text box, and made the textbox the same size as the div.

Also I don't believe it's valid to have a div inside a label, the browser will render it, but it might cause some funky stuff to happen. Also your div isn't closed.

小开

Add this class in .css class

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

and use the class in div. like here.

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

I have attached image , you see the out put of the above code enter image description here


提交答案