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

【问题标题】：HTML: How to create a DIV with only vertical scroll-bars for long paragraphs?HTML：如何为长段落创建一个只有垂直滚动条的 DIV？
【发布时间】：2011-02-03 17:01:27
【问题描述】：

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

目前我正在使用此代码：

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

两个问题：

在所有文本出现之前，它不会固定宽度和高度并展开。
第二个是显示水平滚动条，我不想显示它。

【问题讨论】：

宽度/高度问题由“Daniel Vassallo”解决，水平滚动条问题由“janmoesen”解决。现在我应该接受谁的答案:) 我可以选择多个;)

标签： css html overflow

【解决方案1】：

使用overflow-y。此属性是 CSS 3。

【讨论】：

宽度/高度问题由“Daniel Vassallo”解决，水平滚动条问题由“janmoesen”解决。现在我应该接受谁的答案:) 我可以选择多个;)
这很明显：总是选择失败者，即：声望最低的人。 ;-)
哈哈哈。但是你的答案在“Daniel Vassallo”中并不详细:)
我力求“少即是多”，让链接来说话。不管怎样，随便挑一个，周末愉快！
我相信这里的标准是不要用“只是”一个链接来回答问题，因为链接可能会变得无效。您应该在回答中包含足够的信息以直接回答问题，然后将链接作为参考。

【解决方案2】：

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

overflow-x: hidden;

【讨论】：

我觉得这就是提问者想要的答案......你应该得到更多的信任

【解决方案3】：

您需要在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>

【讨论】：

现在可以使用宽度和高度，但水平滚动条仍未移除。
宽度/高度问题由“Daniel Vassallo”解决，水平滚动条问题由“janmoesen”解决。现在我应该接受谁的答案:) 我可以选择多个;)

【解决方案4】：

先谢谢

使用overflow:auto 它对我有用。

水平滚动条消失。

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

height: 100px;   
overflow-y : scroll;

或

height: 100px; 
overflow-y : auto;

【讨论】：

我更喜欢使用max-height: 100px;。
由于我的配置，缺少 height，因此没有显示垂直滚动条，尽管 height:100%; 对我来说效果更好。

【解决方案7】：

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

height 是可选的

【讨论】：

【解决方案8】：

你可以使用溢出属性

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

【讨论】：

【解决方案9】：

我也遇到了同样的问题...尝试这样做...这对我有用

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

【讨论】：

【解决方案10】：

这是我的组合：

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.

【讨论】：

【解决方案11】：

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

【讨论】：