将 display none 与 div 和页脚一起使用时出现问题

Question

好吧，假设我有两个按钮，一个容器有两个 div，下面是我的页脚，如下所示：

<button id="bt1">Show all</button>
<button id="bt2">Show curses</button>

<div class="container">
   <div class="one"></div>
   <div class="two"></div>
</div>
<footer></footer>

我正在 div 中显示内容。 Div “一”有更高的高度，更多。为了隐藏div“二”，不重叠内容，我使用opacity:0.

我有两个按钮，用于显示或隐藏 div“一个”或“两个”（使用 jQuery）。

但是如果我在显示div“二”时只使用opacity:0来隐藏div“一”，页面会留下一个很大的space空白（由于div“一”比div“二”高）。如这里： enter image description here

所以我决定使用 display:none 来隐藏 div “一”，为了不离开 space 而只显示必要的 space div“二”。但是我的页脚上升了！并与div“两个”内容重叠。

图片如下：enter image description here

我该如何解决这个问题？有任何想法吗？我意识到我的页脚移动是因为没有找到 div "one" 的内容，它上升了。对不起我的英语哈哈

在这里，我给你们留下了一个很好的例子，说明我发生了什么，你们可以 COPY 和运行:

HTML:

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');
});

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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <h2>Problem with divs</h2>
</header>

<button id="bt1">Show all</button>
<button id="bt2">Show curses</button>
<div class="container">
  <div class="one">
    <div class="chart"></div>
    <div class="chart"></div>
    <div class="chart"></div>
    <div class="chart"></div>
    <div class="chart"></div>
    <div class="chart"></div>
    <div class="chart"></div>
    <div class="chart"></div>
    <div class="chart"></div>
    <div class="chart"></div>
    <div class="chart"></div>
    <div class="chart"></div>
  </div>
  <div class="two">
    <div class="curse"></div>
    <div class="curse"></div>
    <div class="curse"></div>
    <div class="curse"></div>
  </div>
</div>

<footer>
  <p>I'm the footer</p>
</footer>

嗯，完全不一样，因为它是一个大项目，但基本上就是这样。

Answer 1

完整答案

检查最大高度开关

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display None</title>

    <link rel="stylesheet" href="estilos.css">
    <style>
        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;
    overflow: hidden;
}

.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;
}
    </style>
</head>
<body>
    <header>
        <h2>Problem with divs</h2>
    </header>

    <button id="bt1">Show all</button>
    <button id="bt2">Show curses</button>

    <div class="container">
        <div class="one">
            <div class="chart"></div>
            <div class="chart"></div>
            <div class="chart"></div>
            <div class="chart"></div>
            <div class="chart"></div>
            <div class="chart"></div>
            <div class="chart"></div>
            <div class="chart"></div>
            <div class="chart"></div>
            <div class="chart"></div>
            <div class="chart"></div>
            <div class="chart"></div>
        </div>
        <div class="two">
            <div class="curse"></div>
            <div class="curse"></div>
            <div class="curse"></div>
            <div class="curse"></div>
        </div>
    </div>

    <footer>
        <p>I'm the footer</p>
    </footer>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        var cont_all = $('.one');
        var bt1 = $('#bt1');
        var cont_curses = $('.two');
        var bt2 = $('#bt2');

        bt2.click(function(){
            cont_all.css('max-height', '0px');
            cont_curses.css('max-height', '100%');
        });
        bt1.click(function(){
           cont_curses.css('max-height', '0px');
           cont_all.css('max-height', '100%');
        });
    </script>
</body>
</html>

Answer 2

试试这个： footer { height: 200px; background: black; color: white; display: flex; justify-content: center; text-align: center; position:fixed; bottom: 0px; }

Answer 3

我稍微改变了@alexkarpen 的回答。除了 max-height，您还可以使用 fadeIn() 和 fadeOut() jquery 函数。看起来有点酷

var cont_all = $('.one');
var bt1 = $('#bt1');
var cont_curses = $('.two');
var bt2 = $('#bt2');
var cont_project = $('.three');
var bt3 = $('#bt3');

bt2.click(function(){
  cont_all.fadeOut("slow");
  cont_project.fadeOut();
  cont_curses.fadeIn("slow");
});
bt3.click(function(){
  cont_all.fadeOut();
  cont_curses.fadeOut();
  cont_project.fadeIn("slow");
});
bt1.click(function(){
  cont_curses.fadeIn("slow");
  cont_project.fadeIn("slow");
  cont_all.fadeIn("slow");
});

.container {
    margin-top: 30px;
    position: relative;
    height: auto;
    padding-bottom: 50px;
}

.one, .two, .three {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    height: auto;
    overflow: hidden;
}

.card {
  width: 25%;
  height: 200px;
  margin: 15px;
}

.chart {
    background: #2096CE;
}

.curse {
    background: #23AD5A;
}

.project {
  background: pink;
}

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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<button id="bt1">Show All</button>
<button id="bt2">Show Curses</button>
<button id="bt3">Show Projects</button>

<div class="container">
  <div class="one">
    <div class="card chart"></div>
    <div class="card chart"></div>
    <div class="card chart"></div>
    <div class="card chart"></div>
    <div class="card chart"></div>
    <div class="card chart"></div>
  </div>
  <div class="two">
    <div class="card curse"></div>
    <div class="card curse"></div>
    <div class="card curse"></div>
  </div>
  <div class="three">
    <div class="card project"></div>
    <div class="card project"></div>
  </div>
</div>

<footer>
  <p>I'm the footer</p>
</footer>

将 display none 与 div 和页脚一起使用时出现问题

Problem when using display none with divs and footer

html

javascript

css

jquery

web-frontend

完整答案