在不使用约束的情况下使框架高度达到80%

要在不使用约束的情况下使框架（假设这里指的是网页布局中的某个框架或容器）的高度达到视口高度的80%，可以使用CSS来实现。以下是详细的基础概念和相关解决方案：

基础概念

视口高度（Viewport Height, vh）：这是一个CSS单位，表示视口高度的百分比。1vh等于视口高度的1%。
CSS Flexbox：一种用于创建灵活布局的CSS模块。
CSS Grid：另一种强大的二维布局系统。

解决方案

可以使用纯CSS来实现这一目标，无需使用任何外部库或框架。

方法一：使用vh单位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            height: 80vh; /* 设置高度为视口高度的80% */
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        This container's height is 80% of the viewport height.
    </div>
</body>
</html>

方法二：使用Flexbox

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
        }
        .container {
            display: flex;
            flex-direction: column;
            height: 80%;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="container">
        This container's height is 80% of the viewport height using Flexbox.
    </div>
</body>
</html>

方法三：使用CSS Grid

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
        }
        .container {
            display: grid;
            height: 80%;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="container">
        This container's height is 80% of the viewport height using CSS Grid.
    </div>
</body>
</html>