html body scrollbars

how to get rid of scrollbars

by guiboy

HTML

<!DOCTYPE html>



<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, but without that scrollbar --->
            </textarea>
        </div>
    </div>
</body>

CSS

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