title: Problem when using display none with divs and footer
body: <p>Ok, let's say that I have two buttons, a container with two divs and below I have my footer, like this:</p>
  <pre><code>&lt;button id=&quot;bt1&quot;&gt;Show all&lt;/button&gt;
  &lt;button id=&quot;bt2&quot;&gt;Show curses&lt;/button&gt;
  
  &lt;div class=&quot;container&quot;&gt;
     &lt;div class=&quot;one&quot;&gt;&lt;/div&gt;
     &lt;div class=&quot;two&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;footer&gt;&lt;/footer&gt;
  </code></pre>
  <p>I'm displaying content inside my divs. Div &quot;one&quot; has more height, much more. In order to hide div &quot;two&quot; and don't overlap content, I use opacity:0.</p>
  <p>I have two buttons, to show or to hide div &quot;one&quot; or &quot;two&quot; (using jQuery).</p>
  <p>But if I only use opacity:0 to hide div &quot;one&quot; when I show div &quot;two&quot;, the page leaves a big space empty (due to div &quot;one&quot; has more height than div &quot;two&quot;). As here:
  <a href="https://i.stack.imgur.com/HANXg.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>So I decided to use display:none to hide div &quot;one&quot;, in order to don't leave space and just show the necessary space for div &quot;two&quot;. But my footer goes up!! And overlaps content with div &quot;two&quot;.</p>
  <p>Here is the image: <a href="https://i.stack.imgur.com/hxOJh.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>How can I solve this? Any ideas? I realized that my footer moves because not finding the content of div &quot;one&quot;, it goes up. Sorry for my english haha</p>
  <hr />
  <p>Here I leave you guys an excelent example of what happens to me, you can COPY and run:</p>
  <p>HTML:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var cont_all = $('.one');
  var bt1 = $('#bt1');
  var cont_curses = $('.two');
  var bt2 = $('#bt2');
  
  bt2.click(function(){
      cont_all.css('display', 'none');
      cont_curses.css('opacity', '1');
  });
  bt1.click(function(){
     cont_curses.css('opacity', '0');
     cont_all.css('display', 'flex');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h2 {
    text-align: center;
    font-size: 40px;
  }
  
  .container {
    margin-top: 50px;
      position: relative;
      height: auto;
      padding-bottom: 50px;
  }
  
  .one, .two {
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
      height: auto;
  }
  
  .one {
    overflow: hidden;
  }
  
  .two {
    width: 100%;
    position: absolute;
      top: 0px;
      opacity: 0;
  }
  
  .chart {
    width: 30%;
    height: 200px;
    margin: 15px;
    background: #2096CE;
  }
  
  .curse {
    width: 30%;
    height: 200px;
    margin: 15px;
    background: #23AD5A;
  }
  
  footer {
    height: 200px;
    background: black;
    color: white;
    display: flex;
    justify-content: center;
    text-align: center;
  }
  
  p {
    text-align: center;
    font-size: 35px;
    margin: auto 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;header&gt;
    &lt;h2&gt;Problem with divs&lt;/h2&gt;
  &lt;/header&gt;
  
  &lt;button id="bt1"&gt;Show all&lt;/button&gt;
  &lt;button id="bt2"&gt;Show curses&lt;/button&gt;
  &lt;div class="container"&gt;
    &lt;div class="one"&gt;
      &lt;div class="chart"&gt;&lt;/div&gt;
      &lt;div class="chart"&gt;&lt;/div&gt;
      &lt;div class="chart"&gt;&lt;/div&gt;
      &lt;div class="chart"&gt;&lt;/div&gt;
      &lt;div class="chart"&gt;&lt;/div&gt;
      &lt;div class="chart"&gt;&lt;/div&gt;
      &lt;div class="chart"&gt;&lt;/div&gt;
      &lt;div class="chart"&gt;&lt;/div&gt;
      &lt;div class="chart"&gt;&lt;/div&gt;
      &lt;div class="chart"&gt;&lt;/div&gt;
      &lt;div class="chart"&gt;&lt;/div&gt;
      &lt;div class="chart"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="two"&gt;
      &lt;div class="curse"&gt;&lt;/div&gt;
      &lt;div class="curse"&gt;&lt;/div&gt;
      &lt;div class="curse"&gt;&lt;/div&gt;
      &lt;div class="curse"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;footer&gt;
    &lt;p&gt;I'm the footer&lt;/p&gt;
  &lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Well it's not the same at all, because it's a big project, but basically is that.</p>