278

我有这个div：

<div style='溢出：滚动；宽度：400px；高度：400px；'>这里有一些文本</div>

滚动条始终可见，即使文本没有溢出。我想让滚动条只在必要时可见，也就是说，只有当框中有足够的文本需要时才可见。就像文本区一样。我该怎么做？或者，我唯一的选择是设置文本区域的样式，使其看起来像div？

改进这个问题
三

9个答案9

重置为默认值
532

使用溢出：自动。滚动条仅在需要时显示。

（侧注，您还可以仅为x或y滚动条指定：溢出-x:自动和溢出-y：自动).

改进此答案
4
  • 19
    请注意，只有在指定了最大高度
    – 黑色
    评论 2018年7月12日10:30
  • 三
    溢出y不需要最大高度。我从未将max-height与overflow-y一起使用，而且每次都有效。
    – 苏马福
    评论 2019年1月18日9:59
  • 2
    @Sumafu根据具体情况，你可能需要它，就像我现在所经历的那样。
    – 大卫
    评论 2019年2月12日14:14
  • 2
    你需要高度或最大高度如果您正在使用，请设置绝对的或固定的放置在溢出元素上，因为这会阻止元素根据页面或视口边界调整大小。
    – 香农·斯科特·舒巴赫
    评论 2019年12月18日18:45
17

试试这个：

<div style='overflow：自动；宽度：400px；高度：400px；'>这里有一些文本</div>
改进此答案
12

更改溢出CSS属性块到汽车.

溢出：自动；

只有在需要时，它才会自动在左侧添加滚动条。

改进此答案
9

尝试

<div style='overflow：自动；宽度：400px；高度：400px；'>这里有一些文本</div>
改进此答案
0
5

尝试

<div id=“boxscroll2”style=“溢出：自动；位置：相对；”tabindex=“5001”>
改进此答案
2

我发现无论是否有文本，都会显示div的高度。所以你可以用它来获得最佳效果。

<div style=“溢出：自动；最大高度：300px；最大宽度：300px；”></div>
改进此答案
2

溢出：自动就是魔法密码。

<!DOCTYPE html><html><头部><样式>第1部分{背景色：浅蓝色；宽度：110px；高度：110px；溢出：滚动；}第2部分{背景色：浅蓝色；宽度：110px；高度：110px；溢出：隐藏；}第三部分{背景色：浅蓝色；宽度：110px；高度：110px；溢出：自动；}第四部分{背景色：浅蓝色；宽度：110px；高度：110px；溢出：剪辑；}五等分{背景色：浅蓝色；宽度：110px；高度：110px；溢出：可见；}</style></头><body><h1>溢出属性</h1><p>overflow属性指定当元素的内容太大而无法放入指定区域时，是剪切内容还是添加滚动条</p>（第页）<h2>溢出：滚动：</h2><div class=“ex1”>Lorem ipsum dolor sit amet、consectetuer adipiscing elit、sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volupat</div（分频）><h2>溢出：隐藏：</h2><div class=“ex2”>Lorem ipsum dolor sit amet、consectetuer adipiscing elit、sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volupat</div（分频）><h2>溢出：自动：</h2><div class=“ex3”>Lorem ipsum dolor sit amet、consectetuer adipiscing elit、sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volupat</div（分频）><h2>溢出：剪辑：</h2><div class=“ex4”>Lorem ipsum dolor sit amet、consectetuer adipiscing elit、sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volupat</div（分频）><h2>溢出：可见（默认）：</h2><div class=“ex5”>Lorem ipsum dolor sit amet、consectetuer adipiscing elit、sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volupat</div（分频）></body></html>

改进此答案
0

您可以尝试以下方法：

文本</div>
改进此答案
1
  • 谢谢，这很有帮助。如果没有特定的高度/宽度（更动态的UI），则此解决方案效果最佳
    – 末日顾伯
    评论 2020年8月15日18:16
0

Stackblitz游戏

<!DOCTYPE html><html><头部><meta name=“viewport”content=“width=设备宽度，initial-scale=1.0”><样式>#可滚动内容{背景：#eee；高度：150px；宽度：400px；overflow-y：滚动；}</style></头><body><div id=“original-content”>Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是该行业的标准虚拟文本，当时一位不知名的印刷商拿了一个打字槽，把它拼凑成一本打字样本书。它不仅存活了五个世纪，而且还跃进了电子排版，基本上保持不变。20世纪60年代，随着包含Lorem Ipsum段落的Letraset表单的发布，以及最近的Aldus PageMaker等桌面出版软件（包括Lorem Ipsum版本）的发布，它开始流行起来</div（分频）><br/>Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是该行业的标准虚拟文本，当时一位不知名的印刷商拿了一个打字槽，把它拼凑成一本打字样本书。它不仅存活了五个世纪，而且还跃进了电子排版，基本上保持不变。20世纪60年代，随着包含Lorem Ipsum段落的Letraset表单的发布，以及最近的Aldus PageMaker等桌面出版软件（包括Lorem Ipsum版本）的发布，它开始流行起来</div（分频）></body></html>
改进此答案

你的答案

单击“发布您的答案”，表示您同意我们的服务条款并确认您已阅读我们的隐私政策.

不是你想要的答案吗？浏览标记的其他问题或问你自己的问题.