如何在不需要时隐藏垂直滚动条 [英] how to hide a vertical scroll bar when not needed

问题描述

我有一个textarea包含在一个div，因为我有jquery提示，并希望使用不透明度，而不改变边框。
有一个可见的垂直滚动条，我只想要在我在文本字段中输入并且超出容器时显示。我试过overflow：auto;但不工作。

I have a textarea which is contained in a div as I have jquery hint and wanted to use opacity without changing the border. There is a visible vertical scroll bar how I only want this displayed when I am typing in the text field and it goes beyond the container. I have tried overflow: auto; but does not work.

文本字段：

<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 ）是正确的方式。

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

问题是您的文字区域比div高。 div最终会截断文本框，因此即使文本高于 159px ，它也不会开始滚动，直到文本更高 400px 这是文本框的高度。

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.

尝试这样：http://jsfiddle.net/G9rfq/1/

我在文本框中设置overflow：auto ，并使文本框的大小与div相同。

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

此外，我不相信有一个 div 在标签内，浏览器将呈现它，但它可能会导致一些时髦的东西发生。此外，您的 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.

这篇关于如何在不需要时隐藏垂直滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！