js实现div铺满

使用CSS样式实现铺满

在HTML中，通过CSS可以轻松让一个div元素铺满其父容器或整个视口。以下是几种常见方法：

width: 100%; height: 100%;
设置div的宽度和高度为100%，使其撑满父容器。需要确保父容器有明确的高度定义，否则百分比高度会失效。

position: absolute; top: 0; left: 0; right: 0; bottom: 0;
通过绝对定位让div覆盖整个父容器。父容器需要设置position: relative或其他非static定位。

vw和vh单位
使用视窗单位可以让div铺满整个浏览器窗口：

div {
  width: 100vw;
  height: 100vh;
}

通过JavaScript动态设置尺寸

如果需要通过JavaScript动态控制div的尺寸，可以使用以下代码：

// 获取div元素
const div = document.querySelector('div');

// 方法1：设置样式属性
div.style.width = '100%';
div.style.height = '100%';

// 方法2：使用视窗尺寸
div.style.width = window.innerWidth + 'px';
div.style.height = window.innerHeight + 'px';

// 监听窗口大小变化
window.addEventListener('resize', () => {
  div.style.width = window.innerWidth + 'px';
  div.style.height = window.innerHeight + 'px';
});

考虑边距和滚动条

当需要精确铺满时，需要注意边距和滚动条的影响：

// 消除body默认边距
document.body.style.margin = '0';

// 考虑滚动条宽度
function getWindowWidth() {
  return window.innerWidth || document.documentElement.clientWidth;
}

function getWindowHeight() {
  return window.innerHeight || document.documentElement.clientHeight;
}

Flex布局实现铺满

现代布局方法推荐使用flexbox：

body {
  display: flex;
  margin: 0;
}

div {
  flex: 1;
}

对应的JavaScript设置：

document.body.style.display = 'flex';
document.body.style.margin = '0';
document.querySelector('div').style.flex = '1';

全屏API实现真正全屏

如果需要让元素占据整个屏幕（包括覆盖浏览器UI）：

// 请求全屏
document.querySelector('div').requestFullscreen();

// 退出全屏
document.exitFullscreen();