html - 高さ 100% を div に設定すると、垂直スクロールバーが発生する

Question

body の div には 3 行のテキストしかありません。背景色は、テキストの 3 行までしか塗りつぶされていませんでした。

ブラウザの垂直方向の 100% を色で塗りつぶしたかったので、heighthtml と body の CSS プロパティを100%. しかし、垂直スクロールバーが表示されるようになりました。どうすれば非表示/削除できますか?

overflow:hiddenhtml プロパティと div プロパティを試しましたが、うまくいきませんでした。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>