How to get the div to expand all over the screen even when the background content is modified?

Question

I try to keep the div that spans the entire screen extended even when the background content changes. Please try the following example. The desired operation is that when clicking on the button the div with class windows continues to cover the entire screen

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>

Pranav Rustagi · Accepted Answer · 2020-09-26T04:35:53.093

1

Is this what you want?

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>

edited Sep 26 '20 at 04:35

answered Sep 26 '20 at 04:30

Pranav Rustagi

2,604
1
5
18

no actually, what I want is that when the background content appears the div with windows class expands so that the background content is still not displayed – Mario Sep 26 '20 at 04:35
@Mario check now. – Pranav Rustagi Sep 26 '20 at 04:37
Indeed, although I can't see that you have modified part of position fixed – Mario Sep 26 '20 at 04:44
1

Actually I had omitted the "background: #fff" earlier. – Pranav Rustagi Sep 26 '20 at 05:16

How to get the div to expand all over the screen even when the background content is modified?

1 Answers1