2012-03-05 161 views
64

我有一个textarea,它包含在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; 
} 

回答

137

overflow: auto(或overflow-y: auto)是正确的方法。

问题是你的文本区域比你的div高。 div最后切断了文本框,所以即使它看起来应该在文本高于159px时开始滚动,它将不会开始滚动,直到文本高于文本框的高度400px

试试这个:http://jsfiddle.net/G9rfq/1/

我设置溢出:汽车上的文本框,并取得了文本框大小相同的股利。

另外我不相信在label里面有div是有效的,浏览器会渲染它,但它可能会导致一些时髦的事情发生。您的div也未关闭。

+0

当我们使用-webkit-scrollbar psuedo元素自定义滚动条时,如何使这个解决方案正常工作。 ?因为如果溢出是自动psuedo元素arent工作....我想定制我的滚动条以及隐藏然后不需要时? – Kpatel1989 2015-04-27 08:37:51

3

overflow: auto;overflow: hidden;应该这样做,我认为。

+0

正如我在我的问题上溢说:汽车;不起作用:( – Lukus 2012-03-05 00:47:51

+0

隐藏? – 2012-03-05 00:49:17

+0

隐藏隐藏滚动条,但一旦文本通过div它不显示滚动条,所以不能向下滚动查看文本的其余部分 – Lukus 2012-03-05 00:51:30

1

添加这个类中的.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> <p class = "scrol" id = "title">-</p></div> 

我附上图片,你看到了把上面的代码的 enter image description here