CSS 高度沾满网页|极客教程

CSS 高度沾满网页

在网页开发中，经常会遇到需要让某个元素的高度沾满整个网页的情况。这种需求可能是为了让页面看起来更美观，也可能是为了实现一些特定的布局效果。在本文中，我们将介绍几种常见的方法来实现让元素的高度沾满整个网页的效果。

1. 使用绝对定位

一种常见的方法是使用绝对定位来让元素的高度沾满整个网页。我们可以将元素的position属性设置为absolute，然后将top、bottom、left、right属性都设置为0，这样元素就会沾满整个网页。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Absolute Positioning</title>
<style>
    body {
        margin: 0;
        padding: 0;
    }
    .full-height {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #f0f0f0;
    }
</style>
</head>
<body>
<div class="full-height">
    This div will fill the entire height of the page.
</div>
</body>
</html>

在上面的示例中，我们创建了一个div元素，并给它添加了full-height类，然后使用CSS将其高度沾满整个网页。

2. 使用Flex布局

另一种常见的方法是使用Flex布局来让元素的高度沾满整个网页。我们可以将父元素的display属性设置为flex，并且将flex-direction属性设置为column，这样子元素就会沾满整个网页的高度。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Layout</title>
<style>
    body {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        height: 100vh;
    }
    .full-height {
        flex: 1;
        background-color: #f0f0f0;
    }
</style>
</head>
<body>
<div class="full-height">
    This div will fill the entire height of the page.
</div>
</body>
</html>

代码运行结果:

CSS 高度沾满网页

在上面的示例中，我们使用Flex布局将body元素的高度设置为整个视口的高度，然后使用flex: 1将子元素的高度沾满整个网页。

3. 使用Grid布局

除了Flex布局，我们还可以使用Grid布局来让元素的高度沾满整个网页。我们可以将父元素的display属性设置为grid，然后将子元素的grid-row属性设置为1 / -1，这样子元素就会沾满整个网页的高度。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout</title>
<style>
    body {
        margin: 0;
        padding: 0;
        display: grid;
        height: 100vh;
    }
    .full-height {
        grid-row: 1 / -1;
        background-color: #f0f0f0;
    }
</style>
</head>
<body>
<div class="full-height">
    This div will fill the entire height of the page.
</div>
</body>
</html>

代码运行结果:

CSS 高度沾满网页

在上面的示例中，我们使用Grid布局将body元素的高度设置为整个视口的高度，然后使用grid-row: 1 / -1将子元素的高度沾满整个网页。

4. 使用vh单位

另一种常见的方法是使用vh单位来让元素的高度沾满整个网页。vh单位表示视口的高度的百分比，例如100vh表示整个视口的高度。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VH Unit</title>
<style>
    body {
        margin: 0;
        padding: 0;
        height: 100vh;
    }
    .full-height {
        height: 100%;
        background-color: #f0f0f0;
    }
</style>
</head>
<body>
<div class="full-height">
    This div will fill the entire height of the page.
</div>
</body>
</html>

代码运行结果:

CSS 高度沾满网页

在上面的示例中，我们将body元素的高度设置为100vh，然后将子元素的高度设置为100%，这样子元素就会沾满整个网页的高度。

5. 使用JavaScript动态计算高度

如果以上方法无法满足需求，我们还可以使用JavaScript来动态计算元素的高度，从而让元素的高度沾满整个网页。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Height Calculation</title>
<style>
    body {
        margin: 0;
        padding: 0;
    }
    .full-height {
        height: 100vh;
        background-color: #f0f0f0;
    }
</style>
</head>
<body>
<div class="full-height" id="fullHeight">
    This div will fill the entire height of the page.
</div>
<script>
    window.addEventListener('resize', function() {
        document.getElementById('fullHeight').style.height = window.innerHeight + 'px';
    });
</script>
</body>
</html>

代码运行结果:

CSS 高度沾满网页