CSS hide scroll bar if not needed

html css

I am trying to figure out how I can hide the overflow-y:scroll; if not needed. What I mean is that I am building a website and I have a main area which posts will be displayed and I want to hide the scroll bar if content does not exceed the current width.

Also, my second question. I want to make it so when the posts exceed the current width, the width will increase automatically and the content won't go out of the box.

Does anyone have a clue how to do this?

Posts area:

.content {
    height: 600px;
    border-left: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;
    font-size: 15px;
    text-align: justify;
    line-height: 19px;
    overflow-y:scroll;
}

Main website container:

.container {
    margin: 0 auto;
    width: 757px;
    margin-top: 30px;
    text-align: center;
}

Do you want to hide the vertical or the horizontal scroll bar? Can you post the example with html code to, e.g., jsfiddle.net and link it here

Hello, I posted the 2 classes I am using. On the html, nothing but calling classes.

Martin

Set overflow-y property to auto, or remove the property altogether if it is not inherited.

I could but I need some help with my second question also, about the width, auto increasing.

You can always try to use the stackoverflow search: stackoverflow.com/questions/450903/…

Where is scroll in your examples?

While setting the overflow-y: auto solved my problem - the link does not actually show an example of this...

Should note that overflow-x: auto also works to hide horizontal scrollbars.

Jacob

You can use overflow:auto;

You can also control the x or y axis individually with the overflow-x and overflow-y properties.

Example:

.content {overflow:auto;}
.content {overflow-y:auto;}
.content {overflow-x:auto;}

Ayyappan K

You can use both .content and .container to overflow:auto. Means if it's text is exceed automatically scroll will come x-axis and y-axis. (no need to give separete x-axis and y-axis commonly give overflow:auto)

.content {overflow:auto;}

Prateek Arora

.selected-elementClass{
    overflow-y:auto;
}

Answer doesn't add any extra value

Toqeer Yousaf

overflow:auto; used to display auto scrollbar

Same as other answers such as stackoverflow.com/a/40348064/2227743

Answer doesn't add any extra value

@Akash If you're certain that an answer is a copy-paste/duplicate/plagiarism, you can and should raise a custom flag. Just link to the original answer and explain your reasoning, e.g. "This answer is a duplicate because it is copied from xxx from y years ago."

Neero

.container {overflow:auto;} will do the trick. If you want to control specific direction, you should set auto for that specific axis. A.E.

.container {overflow-y:auto;} .container {overflow-x:hidden;}

The above code will hide any overflow in the x-axis and generate a scroll-bar when needed on the y-axis.But you have to make sure that you content default height smaller than the container height; if not, the scroll-bar will not be hidden.

Answer doesn't add any extra value

CSS hide scroll bar if not needed

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US