为什么你写的height:100%不起作用

让我来详细讲解为什么height:100%不起作用的原因。

原因解析

首先，我们需要知道height属性是用来设置元素的高度的。当我们设置height:100%时，意思是让该元素的高度等于它的父元素的高度。

但是，在使用height:100%时经常会出现不起作用的情况，主要是因为以下两个原因：

1. 父元素没有设置固定的高度值：当父元素没有设置固定高度值，如height:400px或height:10em等，那么子元素的height:100%就无法生效。因为，如果父元素的高度没有被明确定义，那么子元素是没有相对基准值来计算其高度的。

2. 父元素的高度为auto：当父元素的高度设置为auto时，它的高度是由它的内容撑开的。这种情况下，子元素设置height:100%就会无效，因为它的父元素高度是没有被明确定义的。

解决方案

了解了height:100%不起作用的原因后，我们需要提出相应的解决方案。以下是两种常见的解决方案：

1. 确保父元素设置固定的高度值：为了让子元素的height:100%起到作用，我们需要确保父元素的高度是确定的，可以设置固定的像素值(height:400px)或em值(height:10em)等。这样，子元素就可以通过和父元素高度的比例计算出它的高度。

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  height: 400px;
}
.child {
  height: 100%;
}

1. 使用vh单位：另一种解决方案是使用视口高度单位vh，它可以让元素的高度等于视口高度的百分比。这种方法适用于需要让元素的高度与视口高度自适应的情况。

<div class="child"></div>

.child {
  height: 100vh;
}

示例说明

1. 父元素高度未确定的情况：

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  border: 1px solid black;
}
.child {
  height: 100%;
  background-color: grey;
}

在上述代码中，父元素的高度未被固定，子元素设置height:100%也无法生效。因此，可以看到子元素未显示出来。我们可以通过为父元素设置固定高度值来解决问题。

1. 使用vh单位解决自适应高度的问题：

<div class="child"></div>

.child {
  height: 100vh;
  background-color: grey;
}

在上述代码中，我们使用vh单位设置子元素的高度。由于vh单位相对于视口高度来计算高度值，所以子元素的高度将自适应于浏览器视口的高度。