【问题标题】：Problem when using display none with divs and footer使用带有 div 和页脚的 display none 时出现问题
【发布时间】：2021-08-26 00:30:58
【问题描述】：

好的，假设我有两个按钮，一个带有两个 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 "two" 并且不重叠内容，我使用了 opacity:0。

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

但是，如果我只使用 opacity:0 来隐藏 div “one”，而我显示 div “two”，则页面会留下很大的空白空间（由于 div “one” 的高度比 div “two” 高）。就像这里： enter image description here

所以我决定使用 display:none 来隐藏 div "one"，以便不留空间，只显示 div "two" 的必要空间。但是我的页脚上升了！！并与 div "two" 重叠内容。

这是图片：enter image description here

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

在这里我给你们一个很好的例子来说明我发生了什么，你们可以复制并运行：

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>

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

【问题讨论】：

我们可以看看你的 CSS 吗？
您遇到语法错误，无法关闭class="two 的字符串，应修复该错误，因为格式错误的 HTML 有时会导致难以调试的问题。是否可以创建一个minimal reproducible example 作为 sn-p 来准确说明您遇到的问题？尝试仅从描述中对其进行概念化，并想知道所包含的代码 sn-ps 是否足以重新创建问题是开始这篇文章的一个高标准......
是的，你们两个都是对的。我已经更正了。
只需将bottom:0px;position:fixed 应用到页脚即可。

标签： javascript html jquery css web-frontend

【解决方案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>

【讨论】：

我已经更新了我的案例，我留下了一个很好的例子，你只需要复制这个html代码和css代码，你能帮我吗？ :c 你会看到发生在我身上的事
我无话可说...谢谢！它有效;）真的谢谢你
好吧，如果 alexkarpen 的答案是您所需要的，那么请考虑投票并选择作为接受的答案。

【解决方案2】：

我对@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>

【讨论】：

【解决方案3】：

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

【讨论】：

我一直在寻找我的页脚以保持向下，但如果我想粘贴，你的代码仍然有效，谢谢