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

Question

正文中的 div 中只有 3 行文本。 背景颜色仅填充到那 3 行文本。

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

我尝试了overflow:hidden为 html 以及 div 属性，但没有运气。 使用火狐浏览器。

 * { 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 演示 #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 演示 #2

PS：如今，所有主要的现代浏览器都支持::before伪元素和/或box-sizing属性。 但是如果你正在寻找所有浏览器都支持的传统方式，你可以创建一个.spacer分区，作为.content元素的第一个子元素并设置height: 40px; 到.spacer 。

JSBin 演示 #3

Answer 2

使logodiv绝对定位：

http://jsfiddle.net/Gcduf/

.logodiv
{
    width:100%;
    background-color:#243640;
    height:40px;
    color:#FF1442;
    position: absolute;
    top: 0;
}

Answer 3

使用calc()函数。

对您的代码进行此调整：

.content { height: calc(100% - 40px); }

 .logodiv { height: 40px; background-color: #243640; color: #FF1442; } .content { height: calc(100% - 40px); } body { height: 100vh; } * { margin: 0; padding: 0; }

 <div class="logodiv"> ITEMS LIST </div> <div class="content"> line1<br> line2 <br> line3 <br> </div>

---

你有.logodiv的height: 40px 。

和它的兄弟.content与height: 100% 。

将这两个加在一起，它们会溢出容器（ body ）的高度。 这就是垂直滚动条的原因。

使用calc()函数，您可以使用加法 (+)、减法 (-)、乘法 (*) 和除法 (/) 作为分量值来设置数学表达式。