html - 将高度设置为 100% 到 div 会导致垂直滚动条

Question

body 中的一个div 中只有3 行文本。背景颜色只填充了那 3 行文本。

因为我希望颜色填充浏览器的 100% 垂直方向，我只是将 html 和 body 的 CSS height 属性设置为 100%。但是垂直滚动条现在出现了。我怎样才能隐藏/删除它？

我为 html 和 div 属性尝试了 overflow:hidden 但没有成功。使用 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

改为使用 min-height: 100% 并向 .content 添加负边距以将其向上移动:

.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

注意:为了下推.content元素的内容，我使用了::before伪元素选择器，另一种选择可能是:

使用 box-sizing: border-box 和 padding-top: 40px CSS 声明:

.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: 如今，所有主要的现代浏览器都支持 ::before伪元素和/或box-sizing属性(property)。但是如果你正在寻找所有浏览器都支持的传统方式，你可以创建一个 .spacer 划分，作为 .content 元素的第一个子元素并设置 高度:40px； 到 .spacer。

JSBin Demo #3