js实现div铺满

使用CSS直接控制

在HTML中为div元素添加样式，通过CSS的width和height属性设置为100%，同时确保其父容器具有明确的高度定义。例如：

<style>
  html, body {
    height: 100%;
    margin: 0;
  }
  .full-size {
    width: 100%;
    height: 100%;
    background: #f0f0f0;
  }
</style>
<div class="full-size"></div>

动态计算窗口尺寸

通过JavaScript监听窗口变化，动态调整div尺寸。使用window.innerWidth和window.innerHeight获取可视区域尺寸：

const div = document.querySelector('.resizable-div');
function resize() {
  div.style.width = window.innerWidth + 'px';
  div.style.height = window.innerHeight + 'px';
}
window.addEventListener('resize', resize);
resize(); // 初始化执行

使用Viewport单位

结合CSS的视窗单位实现响应式铺满，无需JavaScript参与：

.viewport-div {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

绝对定位方案

通过CSS绝对定位覆盖整个视窗，适用于需要叠加在其他内容上的场景：

.absolute-full {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

Flexbox布局方案

利用Flex容器特性使子元素自动扩展，适用于嵌套结构：

.flex-container {
  display: flex;
  min-height: 100vh;
}
.flex-child {
  flex: 1;
}

每种方案适用于不同场景：纯CSS方案性能更优，JavaScript方案适合需要动态控制的场景，视窗单位适合简单全屏布局，绝对定位适合浮动层，Flexbox适合复杂布局中的子元素扩展。