要實現自適應高度，您可以使用CSS的min-height屬性結合百分比值。以下是一個簡單的示例：
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自適應高度示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="content">
這是一個自適應高度的示例。
</div>
</div>
</body>
</html>
CSS (styles.css):
html, body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
min-height: 100%;
}
.content {
flex: 1;
}
在這個示例中，我們首先將html和body的高度設置為100%，以確保整個頁面高度占滿瀏覽器視窗。然后，我們為包含內容的container元素設置min-height為100%，并使用display: flex和flex-direction: column將其子元素（即.content）垂直排列。最后，我們為.content元素設置flex: 1，使其自動填充剩余空間，實現自適應高度。
