Question

正文中只有3行文字。背景颜色最多只能填充3行文字。

由于我希望颜色填满浏览器的100％垂直，我只需设置html＆amp;的CSS height属性。身体到100%。但是垂直滚动条现在显示出来了。我该如何隐藏/删除它？

我为html和div属性尝试overflow:hidden;但没有运气。使用Firefox。

CSS：

* {
    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;
}

HTML：

<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属性。但是，如果您正在寻找所有浏览器都支持的传统方式，您可以创建.spacer分区，作为.content元素的第一个子元素，并将height: 40px;设置为.spacer

<强> JSBin Demo #3

Answer 2

让logodiv绝对定位：

http://jsfiddle.net/Gcduf/

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

Answer 3

.logodiv已height: 40px。

你有.content height: 100%。

将这两者加在一起，总和超过其容器的height: 100%（body）。这就是垂直滚动条的原因。

试试这个：

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

DEMO：http://jsfiddle.net/y04jgbaz/

calc()函数允许带加法（+）的数学表达式，减法（ - ），乘法（*）和除法（/）用作组件价值。

浏览器支持也非常好：http://caniuse.com/#search=calc

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

3 个答案: