CSS 高度100%|极客教程

CSS 高度100%

在网页设计中，经常会遇到需要设置元素高度为100%的情况，这样可以让元素充满整个父元素的高度。本文将详细介绍如何使用CSS来实现高度100%的效果。

1. 设置body和html的高度为100%

首先，我们需要确保html和body元素的高度都设置为100%，这样才能确保子元素的高度可以继承父元素的高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Height 100%</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div style="height: 100%; background-color: lightblue;">
        This div has a height of 100% of the viewport height.
    </div>
</body>
</html>

Output:

CSS 高度100%

在上面的示例中，我们设置了html和body元素的高度为100%，然后在body中添加了一个div元素，设置其高度为100%。这样这个div元素的高度就会充满整个视口高度。

2. 使用flex布局实现高度100%

另一种常见的方法是使用flex布局来实现高度100%的效果。通过设置父元素为flex容器，子元素为flex项，并设置flex属性为1，可以让子元素的高度自动填充父元素的高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Height 100% with Flexbox</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .container {
            display: flex;
            height: 100%;
        }

        .item {
            flex: 1;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            This div has a height of 100% of the container height using flexbox.
        </div>
    </div>
</body>
</html>

Output:

CSS 高度100%

在上面的示例中，我们创建了一个flex容器，并设置其高度为100%，然后在容器中添加了一个flex项，设置其flex属性为1。这样这个flex项的高度就会充满整个容器的高度。

3. 使用grid布局实现高度100%

除了flex布局，我们还可以使用grid布局来实现高度100%的效果。通过设置父元素为grid容器，子元素为grid项，并设置grid-template-rows属性为1fr，可以让子元素的高度自动填充父元素的高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Height 100% with Grid</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .container {
            display: grid;
            height: 100%;
            grid-template-rows: 1fr;
        }

        .item {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            This div has a height of 100% of the container height using grid.
        </div>
    </div>
</body>
</html>

Output:

CSS 高度100%

在上面的示例中，我们创建了一个grid容器，并设置其高度为100%，然后在容器中添加了一个grid项。通过设置grid-template-rows属性为1fr，这个grid项的高度就会充满整个容器的高度。

4. 使用绝对定位实现高度100%

另一种常见的方法是使用绝对定位来实现高度100%的效果。通过设置父元素为相对定位，子元素为绝对定位，并设置top、bottom属性为0，可以让子元素的高度自动填充父元素的高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Height 100% with Absolute Positioning</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .container {
            position: relative;
            height: 100%;
        }

        .item {
            position: absolute;
            top: 0;
            bottom: 0;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            This div has a height of 100% of the container height using absolute positioning.
        </div>
    </div>
</body>
</html>

Output:

CSS 高度100%

在上面的示例中，我们创建了一个相对定位的父元素，并设置其高度为100%，然后在父元素中添加了一个绝对定位的子元素。通过设置top和bottom属性为0，这个子元素的高度就会充满整个父元素的高度。

5. 使用calc()函数实现高度100%

除了以上方法，我们还可以使用calc()函数来实现高度100%的效果。通过设置元素的高度为calc(100% – 50px)，可以让元素的高度减去指定的像素值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Height 100% with calc()</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .container {
            height: calc(100% - 50px);
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        This div has a height of 100% of the viewport height minus 50px using calc().
    </div>
</body>
</html>

Output:

CSS 高度100%

在上面的示例中，我们设置了一个元素的高度为calc(100% – 50px)，这样这个元素的高度就会充满整个视口高度减去50像素。

6. 使用vh单位实现高度100%

另一种常见的方法是使用vh单位来实现高度100%的效果。通过设置元素的高度为100vh，可以让元素的高度等于视口的高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Height 100% with vh unit</title>
    <style>
        .container {
            height: 100vh;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        This div has a height of 100% of the viewport height using vh unit.
    </div>
</body>
</html>

Output:

CSS 高度100%

在上面的示例中，我们设置了一个元素的高度为100vh，这样这个元素的高度就会充满整个视口的高度。

7. 使用表格布局实现高度100%

表格布局也是一种实现高度100%的方法。通过将父元素设置为display: table，子元素设置为display: table-row，可以让子元素的高度自动填充父元素的高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Height 100% with Table Layout</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .container {
            display: table;
            height: 100%;
        }

        .row {
            display: table-row;
        }

        .cell {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="cell">
                This div has a height of 100% of the container height using table layout.
            </div>
        </div>
    </div>
</body>
</html>

Output:

CSS 高度100%

在上面的示例中，我们创建了一个表格布局，将父元素设置为display: table，子元素设置为display: table-row。这样子元素的高度就会自动填充父元素的高度。

8. 使用min-height实现最小高度100%

有时候我们需要元素的高度至少为100%，但可以根据内容的多少自动增加高度。这时可以使用min-height属性来实现最小高度为100%的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Min Height 100%</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .container {
            min-height: 100%;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        This div has a minimum height of 100% of the viewport height.
    </div>
</body>
</html>

Output:

CSS 高度100%

在上面的示例中，我们设置了一个元素的min-height为100%，这样这个元素的高度至少为整个视口的高度，但可以根据内容的多少自动增加高度。

9. 使用JavaScript动态设置高度为100%

有时候我们需要根据页面内容的变化动态设置元素的高度为100%，这时可以使用JavaScript来实现。下面是一个示例代码，通过JavaScript动态设置元素的高度为100%。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Height 100% with JavaScript</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .container {
            height: 100%;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container" id="container">
        This div has a height of 100% of the viewport height.
    </div>

    <script>
        window.addEventListener('resize', function() {
            document.getElementById('container').style.height = window.innerHeight + 'px';
        });
    </script>
</body>
</html>

Output:

CSS 高度100%

在上面的示例中，我们通过JavaScript监听窗口大小变化事件，然后动态设置元素的高度为窗口的高度，这样可以实现元素的高度始终为100%。

10. 使用CSS Grid实现多列布局高度100%

在实现多列布局时，有时候我们需要让每一列的高度都为100%，这时可以使用CSS Grid来实现。下面是一个示例代码，通过CSS Grid实现多列布局，每一列的高度都为100%。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Height 100% for Multi-column Layout</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            height: 100%;
        }

        .column {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="column">
            This is column 1 with a height of 100%.
        </div>
        <div class="column">
            This is column 2 with a height of 100%.
        </div>
    </div>
</body>
</html>