css div长宽设置全屏

作者：青灯寂焚发布日期:2025-11-30 浏览:44

/* 设置一个 div 全屏的示例代码 */

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

.fullscreen-div {
  width: 100vw; /* 使用视口宽度单位，确保div的宽度为全屏 */
  height: 100vh; /* 使用视口高度单位，确保div的高度为全屏 */
  background-color: #f0f0f0; /* 可选：设置背景颜色以便于观察效果 */
}

解释说明：

HTML 和 Body 样式:
- margin: 0; 和 padding: 0; 确保没有默认的外边距和内边距。
- width: 100%; 和 height: 100%; 确保 HTML 和 Body 元素占据整个浏览器窗口。
Fullscreen Div 样式:
- width: 100vw; 和 height: 100vh; 使用视口单位 (vw 和 vh) 来确保 div 的宽度和高度分别为视口的 100%。
- background-color: #f0f0f0; 是可选的，用于设置背景颜色以便于观察效果。你可以根据需要修改或删除这行代码。

这样设置后，fullscreen-div 将会占据整个浏览器窗口。

上一篇：css 半透明

下一篇：css 省略号表示溢出文本