Setting height 100% to div causes vertical scrollbar

Question

There are only 3 lines of text in a div in body. The background color was filling only up to those 3 lines of text.

As I wanted the color to fill up 100% vertical of the browser, I just set the CSS height properties of html & body to 100%. But the vertical scrollbar shows up now. How can I hide/remove it?

I tried overflow:hidden for html as well as div properties but no luck. Using 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>

Answer 1

Use min-height: 100% instead and add a negative margin to .content to shift it up:

.logodiv {
  position: relative;
  z-index: 10;
}

.content {
  background-color: gold;
  min-height:100%;
  margin-top: -40px;
}

.content:before {
  content: ' ';
  display: block;
  height: 40px;
}

JSBin Demo #1

Note: In order to push down the content of .content element, I used ::before pseudo-element selector, another option could be:

Using box-sizing: border-box and padding-top: 40px CSS declarations:

.content {
  background-color: gold;
  min-height:100%;
  margin-top: -40px;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  padding-top: 40px;
}

JSBin Demo #2

PS: Nowadays, All major modern browsers support ::before pseudo-element and/or box-sizing property. But if you're looking for the traditional way which all browsers support, you can create a .spacer division, as the first child of .content element and set height: 40px; to .spacer.

JSBin Demo #3