如何使＜div＞始终全屏显示？

要使一个 <div> 元素始终全屏显示，我们可以通过设置 CSS 样式来实现。主要方法是使用 width 和 height 属性来控制 <div> 元素的尺寸，并使用 position 属性来确保它能正确地在视口中定位。以下是一个具体的实现示例：

css
.fullscreen-div {
    position: fixed; /* 或者使用 absolute，取决于具体需求 */
    top: 0;
    left: 0;
    width: 100vw; /* 视口宽度的 100% */
    height: 100vh; /* 视口高度的 100% */
    background-color: #f8f9fa; /* 背景色，可以根据需要修改 */
    z-index: 1000; /* 确保 div 在最上层 */
    overflow: auto; /* 如果内容超出屏幕，允许滚动 */
}

然后在 HTML 中这样使用：

html
<div class="fullscreen-div">
    <!-- 此处可以添加任何内容 -->
    欢迎来到全屏显示的 <div> 元素！
</div>

这段 CSS 和 HTML 代码将确保 <div> 始终占据整个浏览器窗口的视口区域。position: fixed; 确保 <div> 不会随着页面其他部分的滚动而移动，它始终固定在视口的特定位置。

此外，通过设置 width 为 100vw（视口宽度的100%）和 height 为 100vh（视口高度的100%），我们可以确保不管视口的大小如何变化，<div> 都能够完全覆盖视口区域。

最后，z-index: 1000; 确保这个 <div> 在页面中的其他元素上面显示，特别是当页面中有其他层叠元素时。

此方法的一个应用场景是创建一个全屏的欢迎界面或者介绍页面，用户在进入网站时首先看到这样一个界面，增强用户体验。