In a div within the body, there are only 3 lines of text. The background color was only filling up to those 3 lines of text.
To make the color fill up the entire vertical space of the browser, I adjusted the CSS height
properties of html & body to be 100%
. However, this caused the vertical scrollbar to appear. How can I hide or remove it?
I attempted using overflow:hidden
for both the html and div properties, but it did not work. This issue is specific to Firefox.
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.logodiv {
width: 100%;
background-color: #243640;
height: 40px;
color: #FF1442;
}
.content {
/* Firefox 3.6+ */
background: -moz-radial-gradient(circle, #1a82f7, #2F2727);
width: 100%;
height: 100%;
overflow: hidden;
}
<div class="logodiv">
ITEMS LIST
</div>
<div class="content">
line1<br> line2
<br> line3
<br>
</div>