CSS 中的 div 全屏是一種常見的網頁布局技術，可以讓一個 div 元素占據整個頁面的空間，實現全屏效果。在本文中，我們將介紹如何使用 CSS 實現一個 div 元素的全屏效果。

首先，我們需要定義一個包含要全屏的 div 元素的 CSS 樣式。在樣式中，我們可以使用 CSS 的 `width` 和 `height` 屬性來設置 div 元素的寬度和高度，使其占據整個頁面的空間。例如：

```css

.total-screen {

width: 100%;

height: 100%;

display: flex;

justify-content: center;

align-items: center;

上述代碼定義了一個名為 `.total-screen` 的 div 元素，其寬度和高度均為 100%，并使用 CSS 的 `flex` 布局來實現全屏效果。在這個樣式中，我們使用了 `display: flex` 屬性，因為它可以適應不同瀏覽器和設備，并確保 div 元素在屏幕上的縱橫布局。

接下來，我們需要將包含要全屏的 div 元素的 HTML 代碼嵌入到網頁中。例如，假設我們要將一個名為 `example` 的 div 元素全屏顯示，可以在網頁的頭部添加以下代碼：

```html

<div class="total-screen">

<div class="example">

這是一個示例內容。

</div>

</div>

在上面的代碼中，我們使用了 `class` 屬性來為 div 元素定義一個唯一的 CSS 樣式。在這個樣式中，我們使用了 `width` 和 `height` 屬性來設置 div 元素的寬度和高度，使其占據整個頁面的空間。

最后，我們可以使用 JavaScript 或其他 JavaScript 技術來實現全屏效果的一些其他細節，例如更改 div 元素的樣式或調整頁面的布局。例如，假設我們要更改 div 元素的樣式，使其在屏幕上看起來更加美觀，可以使用以下代碼：

```javascript

document.addEventListener('scroll', function() {

const div = document.querySelector('.total-screen');

div.style.width = window.scrollX ? '100%' : 'auto';

在上面的代碼中，我們使用 JavaScript 的 `document.addEventListener` 方法來監聽用戶的滾動事件，并根據滾動位置設置 div 元素的寬度為窗口的滾動位置。

通過使用 CSS 和 JavaScript 的組合，我們可以輕松地實現一個 div 元素的全屏效果。這種技術可以用于各種應用場景，例如展示大型數據集、創建響應式布局等。