CSS, how to make the scrollbar disappear, in a 100% viewport

Question

CSS, how to make the scrollbar disappear, in a 100% viewport

1.6k Views Asked by Agamennon At 02 February 2025 at 02:01

I have set my body and html to be 100%, there seems to be a weird margin collapse case here, i can't seem to make the scrollbar disappear, the body seems to be adding the menu height to its own height causing a scroll

<body>
<div id='container'>
    <div id='menu'>
        i am a menu
    </div>
    <div id='app'>
        i want this div to fill the hole available space so my textarea can fill too
        <div> i am the contents of the app </div>
        <textarea id='text'>
           i want this to be this big filling all the space, as it is now
        </textarea>
    </div>
</div>
</body>

here is the styles i am using:

html, body { height:100%; width:100%}
html { background-color: red; overflow-y:scroll}
body { background-color: white; }

#container
{
  width:100%;
  height:100%;
}
#menu {
    height:100px;
    background-color:lightgrey;
}
#app {
  width:100%;
  height:100%;
  background-color:pink;  
}
#text{
    box-sizing: border-box;
    width:100%;
    height:100%;
}

I don't want to disable the scrollbar, I want the height to be correct and the scroll to be enabled only when content is actually overflowing!

here is a fiddle

i have tried to make container float, and other things that i have researched about margin collapse, but this one does not budge.

please help!, as a bonus is there a different way to make my textarea occupy all available space on the viewport without setting height 100% on every parent?

Original Q&A

There are 4 best solutions below

**Bjørn** · Answer 1

It is because your #app have height:100%. The height av #app is height av body. And remember you have #menu layer with height 100px.

#app height and #menu gvie you more than 100%, it's 100%+100px and you get the scroll.

**Soheil** · Answer 2

This is the code that works well, but I've not understood why !

<html lang="en-US">
<head>
<style>
    html, body {
        overflow-x: hidden;
        height: 100%;
    }

    * {
        margin: 0;
    }

    .background {
        position: fixed;
        width: 100%;
        height: 100%;
        background: white;
    }

    .scroll {
        position: relative;
    }
   </style>
   </head>
    <body>

    <div class="background"></div>
     <div class="scroll">
         1<br>2<br>3<br>4<br>5<br>
         1<br>2<br>3<br>4<br>5<br>aa
         1<br>2<br>3<br>4<br>5<br>aaa
         1<br>2<br>3<br>4<br>5<br>aaaa
         1<br>2<br>3<br>4<br>5<br>aaaaa
         1<br>2<br>3<br>4<br>5<br>aaaaaa
         1<br>2<br>3<br>4<br>5<br>aaaaaaa
         1<br>2<br>3<br>4<br>5<br>aaaaaaaa
         1<br>2<br>3<br>4<br>5<br>aaaaaaaaa
     </div>

  </body>
 </html>

**Ashiqullah Sahibzai** · Answer 3

to remove horizontal scroll just set margin of the body to 0px the vertical scroll cased by 100px menu div because when container div has 100% width of body padding 100px more height the height of div overflow from from 100% to remove vertical scroll set container div y overflow to hidden like overflow- y:hidden;

  body 
  { background-color:
   white; margin:0px; }

  #container
  {
    width:100%;
   height:100%;
  overflow-y:hidden;

  }

**clickbait** · Answer 4

To solve that, you need to add these styles to the #app.

If you're dealing with modern browsers, delete lines 3, 4, 5, and 6.

margin-top: -100px;
padding-top: 100px;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

If your #menu needs to be clickable, append these styles to it.

position: relative;
z-index: 1;

Oh, and be sure to remove the margin on body. By default, it's 8px.

CSS, how to make the scrollbar disappear, in a 100% viewport

There are 4 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in HEIGHT

Related Questions in SCROLLBAR

Related Questions in VIEWPORT

Trending Questions

Popular # Hahtags

Popular Questions