错误的CSS风格

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

小提琴.

Answer 1

在.content没有被显示的元素,因为它具有的高度100%(其被计算为0在这种情况下).因为元素的父元素都没有定义的高度,所以高度100%基本上是0,因为100%什么都没有.

您可以将html/ bodyelements 的高度设置为100%:

html, body {
  height: 100%;
}

如果你不希望使元件获得的高度100%的的body元素,你可以使用calc()减去的高度.header元素,以及:

更新的示例

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

或者,您也可以使用视口百分比单位,例如100vh.由于本机并不总是相对于直接父元素,你可以使用它们而不设定的高度100%上html/ body元素:

例如:

.content {
  height: 100vh;
}

要么:

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