使 div 全屏

要使 div 全屏，我们需要使用 CSS 的一些技巧。

要素

首先，我们需要以下要素：

1. 一个 div，包含我们要全屏显示的内容

<div id="fullscreen-element">
  <p>Hello World!</p>
</div>

2. 一个按钮或者其他元素，用于触发全屏事件

<button id="fullscreen-button">Fullscreen</button>

CSS

接下来，我们需要应用以下 CSS：

#fullscreen-element {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  background-color: white;
}

#fullscreen-element p {
  font-size: 48px;
  text-align: center;
  margin-top: 200px;
}

#fullscreen-button {
  position: absolute;
  top: 20px;
  right: 20px;
}

说明：

1. position: fixed 将 #fullscreen-element 要素移动到浏览器窗口的左上角，以便填充整个窗口
2. width: 100% 和 height: 100% 将 #fullscreen-element 扩展到整个网页窗口的大小。
3. z-index: 999999 将 #fullscreen-element 移动到所有其他元素的顶部（让它是最前面的）
4. background-color: white 将背景颜色设置为白色，以便更好地看到元素。

JavaScript

最后，我们需要编写用于在按下按钮时切换全屏模式的 JavaScript：

const fullscreenButton = document.querySelector('#fullscreen-button');
const fullscreenElement = document.querySelector('#fullscreen-element');

fullscreenButton.addEventListener('click', () => {
  if (document.fullscreenElement) {
    document.exitFullscreen();
  } else {
    fullscreenElement.requestFullscreen();
  }
});

说明：

1. 我们在全局变量 fullscreenButton 和 fullscreenElement 中引用上述 ID 所包含的要素。
2. 当我们按下 fullscreenButton 时，我们检查当前是否处于全屏模式。如果是，则退出全屏，否则切换到 #fullscreen-element 全屏显示。

结论

现在，当我们按下按钮时，我们应该能够看到 #fullscreen-element 全屏显示！