问题背景
在进行网页布局的时候，我们通常会用到百分比来设置元素的高度和宽度，这样可以根据屏幕大小进行自适应。但是有时候我们会发现，在设置元素高度的时候，百分比却不生效，造成布局上的问题。那么，为什么会出现这种情况呢？有什么方法可以解决这个问题呢？接下来我们一起来深入探讨。
问题分析
在解决问题之前，我们需要先了解一些基本概念。在CSS中，有两种基本的长度单位：绝对长度单位和相对长度单位。
绝对长度单位
绝对长度单位是固定的，不受任何因素的影响。在CSS中，常用的绝对长度单位有：
px：像素
pt：磅，1pt=1/72英寸
in：英寸
cm：厘米
mm：毫米
使用绝对长度单位可以保证尺寸的精确度，但是不同设备的屏幕大小不同，使用绝对长度单位可能会造成布局的混乱。
相对长度单位
相对长度单位是根据某些因素计算而来的，具有可扩展性。在CSS中，常用的相对长度单位有：
em：相对于父元素的字体大小
rem：相对于根节点（html元素）的字体大小
%：相对于父元素的宽度或高度
vw：相对于视口宽度的百分比，即1vw等于视口宽度的1%
vh：相对于视口高度的百分比，即1vh等于视口高度的1%
使用相对长度单位可以使布局更具有可扩展性和适应性，但是相对长度单位是相对于具体的参照物计算的，不同的参照物会导致计算结果的不同。因此，在使用相对长度单位时需要格外注意单位的参照物。
问题原因
在设置元素高度的时候，如果使用了百分比作为单位，但是没有指定父元素的高度或者父元素高度为auto，那么设置的百分比就会失效。
/* 父元素高度为auto */
#parent {
height: auto;
}
/* 子元素高度设置为50% */
#child {
height: 50%;
}
以上代码中，父元素的高度为auto，子元素的高度使用了百分比单位50%，这时候子元素的高度就不会生效。
解决方法
方法一：设置父元素高度
为了使百分比高度生效，我们需要确保父元素的高度已经确定。有多种方法可以确定父元素的高度，最常见的方法是使用固定长度单位或者给父元素设置一个固定的高度。
#parent {
height: 500px; /* 或者 height: 50vh; */
}
#child {
height: 50%;
}
以上代码中，我们为父元素设置了一个固定的高度，这样子元素的百分比高度就可以生效。
方法二：使用绝对定位
如果我们无法确定父元素的高度，或者父元素的高度随着内容的改变而改变，我们可以考虑使用绝对定位来解决这个问题。
#parent {
position: relative;
}
#child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
以上代码中，我们将父元素的position属性设置为relative，将子元素的position属性设置为absolute，并且设置top、bottom、left、right属性为0，这样子元素的高度就可以根据父元素的高度自适应了。
方法三：使用flex布局
如果我们使用了flex布局，那么设置子元素的高度为百分比单位就可以很容易地生效。
#parent {
display: flex;
height: 500px;
}
#child {
height: 50%;
}
以上代码中，我们将父元素的display属性设置为flex，子元素的高度设置为50%，这样子元素的高度就可以和父元素各占50%。
总结
在网页布局中，使用百分比来设置元素的高度和宽度可以很好地实现自适应，但是如果没有注意到父元素的高度问题，就会导致百分比的高度设置失效。为了解决这个问题，我们可以使用固定长度单位、绝对定位或者使用flex布局来确定父元素的高度，确保子元素的百分比高度生效。