HTML：如何为长段落创建只有垂直滚动条的 DIV？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2566290/
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
HTML: How to create a DIV with only vertical scroll-bars for long paragraphs?
提问by Awan
I want to show terms and condition note on my website. I dont want to use text field and also dont want to use my whole page. I just want to display my text in selected area and want to use only vertical scroll-bar to go down and read all text.
我想在我的网站上显示条款和条件说明。我不想使用文本字段，也不想使用我的整个页面。我只想在选定区域显示我的文本，并且只想使用垂直滚动条向下阅读所有文本。
Currently I am using this code:
目前我正在使用此代码：
<div style="width:10;height:10;overflow:scroll" >
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
</div>
Two Problems:
两个问题：
- It is not fixing the width and height and spread until the all text appears.
- Second it is showing horizontal scroll-bar and I don't want to show it.
- 在所有文本出现之前，它不会固定宽度和高度并展开。
- 其次它显示水平滚动条，我不想显示它。
回答by janmoesen
Use overflow-y. This property is CSS 3.
使用overflow-y. 此属性是 CSS 3。
回答by Kornelius
to hide the horizontal scrollbars, you can set overflow-x to hidden, like this:
要隐藏水平滚动条，您可以将溢出-x 设置为隐藏，如下所示：
overflow-x: hidden;
回答by Daniel Vassallo
You need to specify the widthand heightin px:
您需要指定width和heightin px：
width: 10px; height: 10px;
In addition, you can use overflow: auto;to prevent the horizontal scrollbar from showing.
此外，您可以使用overflow: auto;防止水平滚动条显示。
Therefore, you may want to try the following:
因此，您可能想尝试以下操作：
<div style="width:100px; height:100px; overflow: auto;" >
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
</div>
回答by raji
Thank you first
先谢谢了
Use overflow:autoit works for me.
使用overflow:auto它对我有用。
horizontal scroll bar disappears.
水平滚动条消失。
回答by Brane
For any case set overflow-xto hiddenand I prefer to set max-heightin order to limit the expansion of the height of the div. Your code should looks like this:
对于任何情况设置overflow-x为hidden并且我更喜欢设置max-height以限制 div 高度的扩展。您的代码应如下所示：
overflow-y: scroll;
overflow-x: hidden;
max-height: 450px;
回答by Ricardo Romo
To show vertical scroll bar in your div you need to add
要在您的 div 中显示垂直滚动条，您需要添加
height: 100px;
overflow-y : scroll;
or
或者
height: 100px;
overflow-y : auto;
回答by Amobi Chuks
overflow-y : scroll;
overflow-x : hidden;
heightis optional
height是可选的
回答by Sunil Kumar
You can use the overflow property
您可以使用溢出属性
style="overflow: scroll ;max-height: 250px; width: 50%;"
回答by singhkumarhemant
I also faced the same issue...try to do this...this worked for me
我也遇到了同样的问题......尝试这样做......这对我有用
.scrollBbar
{
position:fixed;
top:50px;
bottom:0;
left:0;
width:200px;
overflow-x:hidden;
overflow-y:auto;
}
回答by Daniel De León
This is my mix:
这是我的组合：
overflow-y: scroll;
height: 13em; // Initial height.
resize: vertical; // Allow user to change the vertical size.
max-height: 31em; // If you want to constrain the max size.
