使用百分比高度时内部元素无法正常显示的原因与解决方法

本文主要是介绍使用百分比高度时内部元素无法正常显示的原因与解决方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

工作中遇到一个问题

设置了高度90%不好使

  <div><div style="height: 90%"></div></div>

原因分析

在 CSS 中，百分比高度是相对于父元素的高度计算的。如果父元素的高度是 auto（默认值），那么内部元素的百分比高度将无法正常计算。因为没有一个明确的高度参照，内部 div 的高度百分比就无法生效。

解决方法

方法一：使用视口高度

一种常见的方法是将外部 div 的高度设置为视口高度（即 100vh），这样内部的 div 的高度就可以正确计算。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用视口高度</title><style>.outer {height: 100vh; /* 设置外部 div 的高度为视口高度 */border: 1px solid blue;}.inner {height: 90%; /* 内部 div 的高度为外部 div 的 90% */border: 1px solid red;}</style>
</head>
<body><div class="outer"><div class="inner">内部 div</div>
</div></body>
</html>

方法二：确保祖先元素有高度

另一种方法是确保所有祖先元素都有明确的高度设置。通常，我们可以从根元素（html 和 body）开始设置：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>确保祖先元素有高度</title><style>html, body {height: 100%; /* 设置根元素和 body 的高度为 100% */margin: 0;}.outer {height: 50%; /* 设置外部 div 的高度为 body 高度的 50% */border: 1px solid blue;}.inner {height: 90%; /* 内部 div 的高度为外部 div 高度的 90% */border: 1px solid red;}</style>
</head>
<body><div class="outer"><div class="inner">内部 div</div>
</div></body>
</html>