我有这个div:
<div style='overflow:scroll; width:400px;height:400px;'>here is some text</div>
滚动条总是可见的，即使文本没有溢出。我想让滚动条只在必要时才可见——也就是说，只在框中有足够多需要它们的文本时可见。就像文本区域一样。我怎么做呢?或者是我唯一的选择样式一个文本区域，使它看起来像一个div?
当前回答
更改CSS块溢出属性为自动。
overflow: auto;
只有在需要的时候，它才会自动添加一个滚动条到左边。
其他回答
斯塔克闪电游乐场
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#scrollable-content {
background: #eee;
height: 150px;
width: 400px;
overflow-y: scroll;
}
</style>
</head>
<body>
<div id="original-content"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
<br />
<div id="scrollable-content"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
</body>
</html>
使用overflow: auto。滚动条只会在需要时出现。
(注:您还可以只指定x或y滚动条:overflow-x: auto和overflow-y: auto)。
试试这个:
<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>
try
<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>
你可以试试下面这个:
<div style="width: 100%; height: 100%; overflow-x: visible; overflow-y: scroll;">Text</div>
