Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to show the scroll bars of a content-editable div only when it has reached its max height?

Tags:

html

css

I find that the scroll bars (disabled or enable) will show up on the sides of the div despite whether or not the element has reached its max length. Just by putting overflow: value; it will automatically display them. How do I make it so that the scroll bars will only show when the element has reached it's max height?

like image 644
David G Avatar asked Aug 25 '11 12:08

David G


People also ask

How do I show scroll only when overflow?

Add CSS. Set the overflow property to “auto”. This value adds scrollbar when the content overflows.

How do I make a div content scroll?

For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.

How do I always show scroll bars?

To show the scrollbars always on the webpage, use overflow: scroll Property. It will add both horizontal and vertical scrollbars to the webpage. To add only horizontal scrollbar use overflow-x: scroll property and for vertical scrollbar use overflow-y: scroll property.

Does VH include scrollbar?

This is true on a page that doesn't scroll vertically, but what you might not realize is that the viewport actually includes the scrollbars, too.


1 Answers

Using overflow: auto should only produce scrollbars when the height is exceeded.

div.scrollbars {
    max-height: 100px;
    overflow: auto;
}
like image 74
D_V Avatar answered Oct 07 '22 02:10

D_V