HTML:如何为长段创建只有垂直滚动条的DIV?

时间:2010-04-02 11:04:36

标签: css html overflow

我想在我的网站上显示条款和条件备注。我不想使用文本字段,也不想使用我的整个页面。我只想在选定区域显示我的文本,并且只想使用垂直滚动条向下阅读所有文本。

目前我正在使用此代码:

<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>

两个问题:

  1. 在所有文字出现之前,不会固定宽度和高度并进行传播。
  2. 其次是显示水平滚动条,我不想显示它。

11 个答案:

答案 0 :(得分:211)

使用overflow-y。这个属性是CSS 3。

答案 1 :(得分:55)

要隐藏水平滚动条,可以将overflow-x设置为隐藏,如下所示:

overflow-x: hidden;

答案 2 :(得分:50)

您需要在width中指定heightpx

width: 10px; height: 10px;

此外,您可以使用overflow: auto;来阻止水平滚动条显示。

因此,您可能需要尝试以下操作:

<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>

答案 3 :(得分:18)

先谢谢

使用overflow:auto它对我有用。

水平滚动条消失。

答案 4 :(得分:16)

对于将overflow-x设置为hidden的任何情况,我更倾向于设置max-height以限制div高度的扩展。您的代码应如下所示:

overflow-y: scroll;
overflow-x: hidden;
max-height: 450px;

答案 5 :(得分:13)

要在div中显示垂直滚动条,您需要添加

height: 100px;   
overflow-y : scroll;

height: 100px; 
overflow-y : auto;

答案 6 :(得分:2)

您可以使用溢出属性

style="overflow: scroll ;max-height: 250px; width: 50%;"

答案 7 :(得分:2)

overflow-y : scroll;
overflow-x : hidden;

height是可选的

答案 8 :(得分:1)

这是我的搭配:

{{1}}

答案 9 :(得分:0)

我也面临着同样的问题...尝试这样做...这对我有用

        .scrollBbar 
        {
        position:fixed;
        top:50px;
        bottom:0;
        left:0;
        width:200px;
        overflow-x:hidden;
        overflow-y:auto;
       }

答案 10 :(得分:0)

有时这会有所帮助: 请记住,垂直滚动条会占用水平空间。您的显示器可能适用于 width: 100% 并且内容太少而无法保证垂直滚动条。然后当你添加更多内容时,你会得到垂直滚动条——正如预期的那样——但是当内容将它的溢出包裹在 div 中时,一个恼人的水平滚动条也会弹出。原因是垂直滚动条本身占用了一些水平空间,而水平条似乎允许读者在垂直滚动条下方滚动。 解决这个问题的方法是缩短宽度。例如 width: 95% 将删除水平条,只显示垂直条。