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?
Aucun commentaire:
Enregistrer un commentaire