HTML: 如何为长段落创建一个只有垂直滚动条的 DIV？

我想在我的网站上显示条款和条件说明。我不想使用文本字段，也不想使用我的整个页面。我只是想显示我的文字在选定的区域，并希望只使用垂直滚动条下降，并阅读所有文字。

目前我正在使用以下代码:

<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. 其次，它显示水平滚动条，我不想显示它。
514270 次浏览
小开

你需要在 px中指定 width和 height:

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>
小开
最佳答案

使用 overflow-y。此属性为 CSS3。

小开

先谢谢你

使用 overflow:auto它为我工作。

水平滚动条消失。

小开

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

overflow-x: hidden;
小开

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

height: 100px;
overflow-y : scroll;

或者

height: 100px;
overflow-y : auto;
小开

可以使用溢出属性

style="overflow: scroll ;max-height: 250px; width: 50%;"
小开 
overflow-y : scroll;
overflow-x : hidden;

height是可选的

小开

对于任何情况，将 overflow-x设置为 hidden，我更喜欢将 max-height设置为限制 div 高度的展开。您的代码应该如下所示:

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

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

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

这是我的混音:

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.
小开

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


提交答案