错误的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; 
} 

fiddle。

Answer 1

.content元素未被显示，因为它的高度为100%（在这种情况下计算为0）。由于元素的父元素都没有定义的高度，所以100%的高度本质上是0，因为100%什么也没有。

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

html, body { 
    height: 100%; 
} 

如果你不想使元件获得的body元素的100%的高度，你可以使用calc()减去所述.header元件的高度，以及：

Updated Example

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

---

或者，您也可以使用viewport percentage units，如100vh。由于本机并不总是相对于直接父元素，你可以使用它们没有html/body元素上设置的100%高度：

例如：

.content { 
    height: 100vh; 
} 

或：

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