Question

如何启用内容可见性？为什么它不可见？

<div class="header"></div>
<div class="categories"></div>
<div class="content"></div>

CSS样式：

body {
  margin: 0;
  padding: 0;
}
.header {
  padding-top: 0;
  margin-top: 0;
  height: 160px;
  background: #666;
}
.categories {
  position: absolute;
  height: 100%;
  width: 20%;
  background: #b6fd40;
}
.content {
  height: 100%;
  width: 100%;
  background: gray;
}

fiddle

Answer 1

.content元素未显示，因为它的高度为100%（在这种情况下计算为0）。由于元素的父元素都没有定义的高度，因此100%的高度基本上是0，因为100%的任何内容都没有。

您可以将html / body元素的高度设置为100%：

html, body {
  height: 100%;
}

如果您不希望该元素的100%元素高度为body，则可以使用calc()减去.header的高度元素以及：

Updated Example

.content {
  height: calc(100% - 160px);
  background: gray;
}

或者，您也可以使用100vh，例如100%。由于此单位并不总是相对于直接父元素，因此您可以使用它们而不在html / body元素上设置.content { height: 100vh; }的高度：

例如：

.content {
  height: calc(100vh - 160px);
}

或：

int **p;
p = new int*[R];
for(i=0; i<R; i++)
    p[i] = new int[C];

错误的CSS风格

1 个答案: