6

正文中的 div 中只有 3 行文本。背景颜色最多只能填充那 3 行文本。

由于我希望颜色 100% 垂直填充浏览器，因此我只需将heighthtml & body 的 CSS 属性设置为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>

4

3 回答 3

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: 40pxCSS 声明：

.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划分，作为 element 的第一个子.content元素并设置height: 40px;为.spacer.

JSBin 演示 #3

于 2013-08-15T13:17:33.653 回答
0

使logodiv绝对定位：

http://jsfiddle.net/Gcduf/

.logodiv
{
    width:100%;
    background-color:#243640;
    height:40px;
    color:#FF1442;
    position: absolute;
    top: 0;
}
于 2013-08-15T13:18:45.003 回答
0

使用该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()功能，您可以使用加法 (+)、减法 (-)、乘法 (*) 和除法 (/) 作为分量值来设置数学表达式。

于 2015-10-25T14:19:43.903 回答