Html 在 textarea 上启用垂直滚动

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8580991/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 12:06:42  来源:igfitidea点击:

Enable vertical scrolling on textarea

htmlcss

提问by Hozefa

I have a textarea that I want to enable vertical scrolling. When I exceed the height of the textarea, it increases in size. The scroll bar does not appear. I want that a vertical scroll bar appears and the users are not able to resize the text area as well.

我有一个想要启用垂直滚动的 textarea。当我超过 textarea 的高度时,它的大小会增加。不出现滚动条。我希望出现一个垂直滚动条,并且用户也无法调整文本区域的大小。

I searched online and tried solutions posted, but none seem to work.

我在网上搜索并尝试发布的解决方案,但似乎没有一个工作。

Demo: http://jsfiddle.net/hozefa/8fv6e/

演示:http: //jsfiddle.net/hozefa/8fv6e/

CSS:

CSS:

#imageURLId{
font-size: 14px;
font-weight: normal;
resize: none;
overflow-y: scroll;
}

HTML:

HTML:

<label for="aboutDescription" id="aboutHeading">About</label>
<textarea rows="15" cols="50" id="aboutDescription"
    style="resize: none;"></textarea>
<a  id="imageURLId" target="_blank">Go to
    HomePage</a>

采纳答案by Mike Christensen

You can try adding:

您可以尝试添加:

#aboutDescription
{
    height: 100px;
    max-height: 100px;  
}

Update: http://jsfiddle.net/8fv6e/3/

更新:http: //jsfiddle.net/8fv6e/3/

回答by Royi Namir

Try this: http://jsfiddle.net/8fv6e/8/

试试这个:http: //jsfiddle.net/8fv6e/8/

It is another version of the answers.

这是答案的另一个版本。

HTML:

HTML:

<label for="aboutDescription" id="aboutHeading">About</label>
<textarea rows="15" cols="50" id="aboutDescription"
    style="max-height:100px;min-height:100px; resize: none"></textarea>
<a  id="imageURLId" target="_blank">Go to
    HomePage</a>

CSS:

CSS:

#imageURLId{
font-size: 14px;
font-weight: normal;
resize: none;
overflow-y: scroll;

}

回答by Jose Philip Raja

Simply, change

简单的,改变

<textarea rows="15" cols="50" id="aboutDescription"
style="resize: none;"></textarea>

to

<textarea rows="15" cols="50" id="aboutDescription"
style="resize: none;" data-role="none"></textarea>


ie, add:

即,添加:

data-role="none"

回答by Brian Noah

Here's your CSS

这是你的 CSS

element{
  width: 200px;
  height: 300px;
  overflow-y: auto;
}

回答by Bernat

Maybe a fixed heightand overflow-y: scroll;

也许一个固定的heightoverflow-y: scroll;