CODEWITHSUNDEEP
htmlcss
Thanos Paravantis
Thanos Paravantis

Reputation: 7693

CSS hide scroll bar if not needed

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;
}

Upvotes: 666

Views: 452415

Answers (6)

Neero
Neero

Reputation: 107

.container {overflow:auto;}

will do the trick. If you want to control a 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 your content default height is smaller than the container height; if not, the scroll-bar will not be hidden.

Upvotes: 9

Toqeer Yousaf
Toqeer Yousaf

Reputation: 414

overflow:auto; used to display auto scrollbar

Upvotes: 11

RJo
RJo

Reputation: 16291

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

Upvotes: 1181

Prateek Arora
Prateek Arora

Reputation: 666

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

Upvotes: 14

Ayyappan K
Ayyappan K

Reputation: 1186

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;}

Upvotes: 11

Ayyappan K
Ayyappan K

Reputation: 1186

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;}

Upvotes: 73

Related Questions