I have this div:
<div style='overflow:scroll; width:400px;height:400px;'>here is some text</div>
The scrollbars are always visible, even though the text does not overflow. I want to make the scrollbars only be visible when necessary - that is, only visible when there is enough text in the box that they are needed. Like a textarea does. How do I do this? Or is my only option to style a textarea so it looks like a div?
overflow: auto; doesn't work on Android :-(
Use overflow: auto. Scrollbars will only appear when needed.
(Sidenote, you can also specify for only the x, or y scrollbar: overflow-x: auto and overflow-y: auto).
try this:
<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>
try
<div id="boxscroll2" style="overflow: auto; position: relative;" tabindex="5001">
Change overflow property of CSS block to auto.
overflow: auto;
It will automatically add a scrollbar to the left only when needed.
I found that there is height of div still showing, when it have text or not. So you can use this for best results.
<div style=" overflow:auto;max-height:300px; max-width:300px;"></div>
You can try with below one:
<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>
Follow WeChat
Success story sharing
Want to stay one step ahead of the latest teleworks?
Subscribe Now相似问题
- Make a div fill the height of the remaining screen space
- How can I make a div not larger than its contents?
- CSS 100% height with padding/margin
- How do I give text or an image a transparent background using CSS?
- How to disable text selection highlighting
- How to make a div 100% height of the browser window
- How do I auto-resize an image to fit a 'div' container?
- How do I disable the resizable property of a textarea?
- Multiple lines of input in <input type="text" />
- Font scaling based on width of container
max-heightheightormax-heightset if you're usingabsoluteorfixedposition on the overflow element as these prevent the element from resizing based on page or viewport boundaries.