CODEWITHSUNDEEP
htmlcss
T.RY
T.RY

Reputation: 23

Hide scrollbar in CSS?

I have this menu that when the height is more than 800px you can scroll, but when is less than 800px you can't scroll but the sidebar appears. I would like to know how to hide it while the height is less than 

.menu{
 height:
 max-height:800px;
 overflow:scroll;
 overflow-x: hidden;
     }

Upvotes: 1

Views: 169

Answers (7)

Roshan Deshapriya
Roshan Deshapriya

Reputation: 39

Add the height in "vh", in your case make it around 95vh, then overflow-y:hidden;

Upvotes: 0

Bhargav Chudasama
Bhargav Chudasama

Reputation: 7165

try this code

.menu {
  height: max-height:800px;
  overflow: auto;
  overflow-x: hidden;
}

.menu ul li {
  list-style-type: none;
}
<div class="menu">
  <ul>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
  </ul>
</div>

Upvotes: 0

Rithwik
Rithwik

Reputation: 1198

The overflow attributes can take different values, that let you decide how to deal with content that extends beyond the boundary of the container. In this case what you need to use is overflow: auto;.

See this link for reference. https://www.w3schools.com/cssref/pr_pos_overflow.asp

And this is a link where you can try out different styles : Demo

Upvotes: 0

Super User
Super User

Reputation: 9642

overflow: scroll always show scrollbar in your html.
You can use overflow: auto instead of scroll

.menu{
  height: auto;
  max-height: 800px;
  overflow: auto;
  overflow-x: hidden;
}

Upvotes: 0

Mohammed Shereif
Mohammed Shereif

Reputation: 145

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

Upvotes: 0

Ehsan
Ehsan

Reputation: 12951

Try This:

.menu {
    box-sizing:border-box;
    overflow:auto;
    //other code...
}

Upvotes: 1

Koby Douek
Koby Douek

Reputation: 16675

You need to use auto:

 overflow:auto;

This means that the scrollbar is visible only when necessary.

Upvotes: 1

Related Questions