即使修改了背景内容，如何让 div 扩展到整个屏幕？ [复制]

Question

即使背景内容发生变化，我也会尝试使跨越整个屏幕的 div 保持扩展。请尝试以下示例。所需的操作是当点击按钮时，带有类窗口的 div 继续覆盖整个屏幕

document.querySelector("button").addEventListener("click", () => {
  document.querySelector("ul").classList.toggle("hide");
});

.window {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  border: 2px solid goldenrod;
}

ul {
  list-style: none;
  padding: 0;
}

ul li {
  padding: 20px;
}

ul.hide {
  display: none;
}

<div class="window"><button>Click me</button></div>

<ul class="hide">
  <li>Item-1</li>
  <li>Item-2</li>
  <li>Item-3</li>
  <li>Item-4</li>
  <li>Item-5</li>
  <li>Item-6</li>
  <li>Item-7</li>
  <li>Item-8</li>
  <li>Item-9</li>
  <li>Item-10</li>
  <li>Item-11</li>
  <li>Item-12</li>
  <li>Item-13</li>
  <li>Item-14</li>
  <li>Item-15</li>
  <li>Item-16</li>
  <li>Item-17</li>
  <li>Item-18</li>
  <li>Item-19</li>
  <li>Item-20</li>
</ul>

Answer 1

这是你想要的吗？

document.querySelector("button").addEventListener("click", () => {
  document.querySelector("ul").classList.toggle("hide");
});

.window {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border: 2px solid goldenrod;
}

ul {
  list-style: none;
  padding: 0;
}

ul li {
  padding: 20px;
}

ul.hide {
  display: none;
}

<div class="window"><button>Click me</button></div>

<ul class="hide">
  <li>Item-1</li>
  <li>Item-2</li>
  <li>Item-3</li>
  <li>Item-4</li>
  <li>Item-5</li>
  <li>Item-6</li>
  <li>Item-7</li>
  <li>Item-8</li>
  <li>Item-9</li>
  <li>Item-10</li>
  <li>Item-11</li>
  <li>Item-12</li>
  <li>Item-13</li>
  <li>Item-14</li>
  <li>Item-15</li>
  <li>Item-16</li>
  <li>Item-17</li>
  <li>Item-18</li>
  <li>Item-19</li>
  <li>Item-20</li>
</ul>