如何阻止网格超出容器div？网格hover着色溢出容器问题求助

嘿，我看到你的问题了——网格底部的着色会超出容器跑到页面上，对吧？咱们来一步步搞定这个问题。

问题根源分析 #

你当前的实现有两个核心问题：

1. 用float:left来排列网格单元格，float元素会脱离正常文档流，再加上你给容器设置了固定的500px高度，但24行×35px的单元格总高度是840px，远远超过容器高度，且容器没有溢出限制，导致底部单元格“跑”到容器外。
2. 你已经定义了--grid-rows和--grid-cols变量，但没真正利用CSS Grid布局，这才是实现网格的最佳方式，比float稳定得多。

修复后的完整代码 #

HTML（无需修改）

<!DOCTYPE html>
<html>
<head>
<title> Claudias Etch-A-Sketch</title>
<link rel= "stylesheet" href="style.css">
</head>
<body>
<section class="back">
<h1>
<center> Claudia Etch-A-Sketch!</center>
</h1>
</section>
<section>
<center><div>
<button class="Black">Black</button>
<button class="Pink">Pink</button>
<button class="Clear">Eraser</button>
</div></center>
</section>
<section>
<center><div id="container">
</div></center>
</section>
</body>
<script src ="javascript.js">
</script>
</html>

CSS（核心修改）

#container{
  width:500px;
  height:500px;
  margin-top: 30px;
  margin-bottom: 300px;
  background:#eee;
  /* 启用CSS Grid布局，利用自定义变量自动分配行列 */
  display: grid;
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  /* 隐藏容器外的内容，彻底防止溢出 */
  overflow: hidden;
  /* 可选：添加网格间距，让单元格更清晰 */
  gap: 1px;
}

/* 移除float和固定宽高，让Grid自动管理单元格大小 */
#container div.griditem {
  background: transparent;
  /* 可选：加边框区分单元格 */
  border: 1px solid #ddd;
}

.black {
  background: black !important;
}
.pink {
  background: pink !important;
}
.reset {
  background: transparent !important;
}

JavaScript（优化细节）

const container = document.getElementById("container");
const buttons = document.querySelectorAll('button');

buttons.forEach(button => {
  button.addEventListener('click', () => {
    const choice = button.innerHTML;
    switch (choice) {
      case "Pink":
        setColorMode('pink');
        break;
      case "Black":
        setColorMode('black');
        break;
      case "Eraser":
        setColorMode('reset');
        break;
    }
  });
});

let currentMouseoverHandler = () => {};

function setColorMode(mode) {
  // 移除旧的事件监听
  container.removeEventListener('mouseover', currentMouseoverHandler);
  // 定义新的处理函数
  currentMouseoverHandler = (e) => {
    // 只作用于网格单元格，避免容器本身被着色
    if (!e.target.classList.contains('griditem')) return;
    
    e.target.classList.remove('black', 'pink', 'reset');
    e.target.classList.add(mode);
  };
  // 添加新的事件监听
  container.addEventListener('mouseover', currentMouseoverHandler);
}

function makeRows(rows, cols) {
  container.style.setProperty('--grid-rows', rows);
  container.style.setProperty('--grid-cols', cols);
  // 先清空容器，防止重复生成单元格
  container.innerHTML = '';
  for (let c = 0; c < rows * cols; c++) {
    const cell = document.createElement("div");
    cell.className = "griditem";
    container.appendChild(cell);
  }
}

// 初始化网格
makeRows(24, 24);

关键修改说明 #

1. CSS Grid布局：给容器加上display: grid，用repeat()函数和自定义变量让行列自动均分容器宽高，单元格大小会自适应容器，不会出现总高度超出的问题。
2. 溢出控制：添加overflow: hidden确保所有单元格都被限制在容器内部。
3. 事件监听优化：统一了颜色模式的处理逻辑，并且增加了判断，只给griditem类的元素着色，避免误操作容器本身。
4. 容器清空：生成网格前先清空容器，防止多次调用函数时生成重复单元格。

内容的提问来源于stack exchange，提问作者Elliott1197