CSS div 全屏|极客教程

CSS div 全屏

在网页设计中，有时候我们希望将某个 <div> 元素占满整个屏幕，使其成为全屏显示。通过一些简单的CSS技巧，我们可以很容易实现这个效果。本文将详细解释如何让一个 <div> 元素占满整个屏幕，并提供一些示例代码帮助读者更好地理解。

方法一：使用 `height` 和 `width` 属性设置全屏

最简单的方法是通过设置 <div> 的高度（height）和宽度（width）为100%，使其铺满整个屏幕。下面是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Full Screen Div</title>
<style>
    body, html {
        margin: 0;
        padding: 0;
        height: 100%;
    }
    .fullscreen {
        height: 100vh; /* 使用视口高度作为高度值 */
        width: 100vw; /* 使用视口宽度作为宽度值 */
        background-color: #f0f0f0;
    }
</style>
</head>
<body>
<div class="fullscreen">
    This is a fullscreen div.
</div>
</body>
</html>

在上面的代码中，我们首先设置<body>和<html>元素的高度为100%，这样可以确保整个页面占满屏幕。然后，我们定义一个类名为fullscreen的 <div> 元素，通过设置高度和宽度分别为100vh和100vw，使其铺满整个屏幕。最后，我们给这个 <div> 元素添加了一个背景颜色，以便更好地展示效果。

您可以将以上代码复制粘贴到一个HTML文件中并在浏览器中打开，您将看到一个铺满整个屏幕的 <div> 元素。

方法二：使用 `position: fixed` 属性固定元素

另一种方法是使用position: fixed属性，这样可以使元素相对于浏览器窗口固定位置。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Full Screen Div</title>
<style>
    .fullscreen {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #f0f0f0;
    }
</style>
</head>
<body>
<div class="fullscreen">
    This is a fullscreen div with fixed position.
</div>
</body>
</html>

在上面的代码中，我们定义了一个类名为fullscreen的 <div> 元素，并设置其position属性为fixed，然后通过top: 0; left: 0; right: 0; bottom: 0;将其固定在浏览器窗口的四个边缘，这样就可以让它铺满整个屏幕。同样地，我们给这个 <div> 元素添加了一个背景颜色，以便更好地展示效果。

您也可以将以上代码复制粘贴到一个HTML文件中并在浏览器中打开，您将看到一个使用position: fixed属性的铺满整个屏幕的 <div> 元素。

方法三：使用CSS Grid布局实现全屏效果

另一种常见的方法是使用CSS Grid布局，通过将 <div> 元素设置为Grid容器，使其占满整个网页。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Full Screen Div</title>
<style>
    body {
        margin: 0;
        padding: 0;
        display: grid;
        place-items: center;
        height: 100vh;
    }
    .fullscreen {
        background-color: #f0f0f0;
    }
</style>
</head>
<body>
<div class="fullscreen">
    This is a fullscreen div with CSS Grid layout.
</div>
</body>
</html>

在上面的代码中，我们将<body>元素设置为display: grid，这样 <body> 元素就成为一个Grid容器，然后通过place-items: center;将Grid项（这里是 <div> 元素）居中显示。最后，我们将<div>元素的高度设置为100vh，使其铺满整个屏幕。同样地，我们给这个 <div> 元素添加了一个背景颜色。

您也可以将以上代码复制粘贴到一个HTML文件中并在浏览器中打开，您将看到一个使用CSS Grid布局的铺满整个屏幕的 <div> 元素。

通过以上三种方法，我们可以轻松地实现一个铺满整个屏幕的 <div> 元素。读者可以根据自己的实际需求选择其中一种方法来实现全屏效果。