溫馨提示×

CSS minheight怎樣實現(xiàn)自適應(yīng)高度

css
小樊
81
2024-10-21 21:55:37
欄目: 編程語言

要實現(xiàn)自適應(yīng)高度，您可以使用CSS的min-height屬性結(jié)合百分比值。以下是一個簡單的示例：

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自適應(yīng)高度示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="content">
            這是一個自適應(yīng)高度的示例。
        </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的高度設(shè)置為100%，以確保整個頁面高度占滿瀏覽器視窗。然后，我們?yōu)榘瑑?nèi)容的container元素設(shè)置min-height為100%，并使用display: flex和flex-direction: column將其子元素（即.content）垂直排列。最后，我們?yōu)?code>.content元素設(shè)置flex: 1，使其自動填充剩余空間，實現(xiàn)自適應(yīng)高度。

0 踩