我有這個div:
<div style='overflow:scroll; width:400px;height:400px;'>here is some text</div>滾動條總是可見的，即使文本沒有溢出。我想讓滾動條只在必要的時候才可見——也就是說，只在框中有足夠的文本需要時才可見。就像文本區域一樣。我該怎么做？或者，我唯一的選擇是將textarea樣式化，使其看起來像一個div？
使用溢出:自動。滾動條只會在需要的時候出現。
(另請注意，您也可以只為x或y滾動條指定:overflow-x: auto和overflow-y: auto)。
試試這個:
<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>將CSS塊的溢出屬性更改為auto。
overflow: auto;只有在需要的時候，它才會自動在左邊添加滾動條。
嘗試
<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>嘗試
<div id="boxscroll2" style="overflow: auto; position: relative;" tabindex="5001">我發現有高度的div仍然顯示，當它有文字或沒有。所以你可以用這個來達到最佳效果。
<div style=" overflow:auto;max-height:300px; max-width:300px;"></div>你可以試試下面這個:
<div style="width: 100%; height: 100%; overflow-x: visible; overflow-y: scroll;">Text</div>斯塔克布利茨游樂場
<!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>溢出:auto是神奇的代碼。
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: scroll;
}
div.ex2 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: hidden;
}
div.ex3 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: auto;
}
div.ex4 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: clip;
}
div.ex5 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: visible;
}
</style>
</head>
<body>
<h1>The overflow Property</h1>
<p>The overflow property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.</p>
<h2>overflow: scroll:</h2>
<div class="ex1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<h2>overflow: hidden:</h2>
<div class="ex2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<h2>overflow: auto:</h2>
<div class="ex3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<h2>overflow: clip:</h2>
<div class="ex4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<h2>overflow: visible (default):</h2>
<div class="ex5">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</body>
</html>