[分享]css中div如何占满整个屏幕

CSS中的div是一种非常常见的元素，它可以用来分割页面，将不同的内容进行分组和区域划分。有时候，我们希望一个div可以占满整个屏幕，这篇文章就将会介绍如何实现。要让一个div占满整个屏幕，我们首先要...

CSS中的div是一种非常常见的元素，它可以用来分割页面，将不同的内容进行分组和区域划分。有时候，我们希望一个div可以占满整个屏幕，这篇文章就将会介绍如何实现。

要让一个div占满整个屏幕，我们首先要明确的是整个页面需要具有以下两个特点：

 html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    } 

这样写的意思是让html和body元素都占满整个屏幕，并且将外边距和内边距都设置为0。接下来，我们就可以在页面中添加一个div元素，并给其设置以下代码：

 .full-screen {
        width: 100%;
        height: 100vh;
        background-color: #333;
    } 

上面的代码中，我们给div设置了宽度为100%，高度为100vh，并设置了背景色为#333。其中，100vh指的是视口高度（Viewport Height），也就是浏览器窗口的高度。这样设置的好处是可以让div占满整个屏幕不受浏览器大小的影响。

最后，我们只需要在HTML中添加以下代码即可：

 <div class="full-screen"></div> 

这样就可以让这个div占满整个屏幕了。如果想要设置div中的内容居中，可以在CSS中再添加以下代码：

 .full-screen {
        display: flex;
        justify-content: center;
        align-items: center;
    } 

上面的代码中，我们使用了flex布局，并将内容水平和垂直居中。这样就可以让div中的内容居中显示了。

总结起来，让一个div占满整个屏幕只需要设置html和body元素的高度为100%，然后给div元素设置宽度为100%，高度为100vh即可。如果想让内容居中，可以使用flex布局。