页脚很粘，直到我展开手风琴（html、css、vanilla js）

Question

基本上我的粘性页脚通常位于页面底部，完全可以正常工作。但是，在带有手风琴的页面上 position:absolute、bottom:0，手风琴展开后似乎无法正常工作。几年前看到过关于此问题的类似帖子，但没有发布解决方案。由于我是新手，请提前致歉！

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

    .collapsible {
        background-color: #777;
        color: white;
        cursor: pointer;
        padding: 2%;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
      }
      
      .active, .collapsible:hover {
        background-color: #555;
      }
      
#footerContainer{
    position: absolute;
    width: 100%;
    right: 0;
    bottom: 0;
    left: 0;
}

 <div class= "projectsContainer" id= "projectsContainer">

        <button type="button" class="collapsible">Front End</button>
        
        <div class="content">
          <div class = "Project">
          <h1 class="projectsTitle">Project</h1>
        </div>
        
        <div class="content">
          <div class = "Project">
          <h1 class="projectsTitle">Project</h1>
        </div>
        </div>
        </div>
      
        <button type="button" class="collapsible">Back End</button>
      
        <div class="content">
          <div class = "Project">
          <h1 class="projectsTitle">Project</h1>
        </div>
         <div class="content">
          <div class = "Project">
          <h1 class="projectsTitle">Project</h1>
        </div>
        </div>
        </div>
        
                <button type="button" class="collapsible">Full Stack</button>
      
        <div class="content">
          <div class = "Project">
          <h1 class="projectsTitle">Project</h1>
        </div>
         <div class="content">
          <div class = "Project">
          <h1 class="projectsTitle">Project</h1>
        </div>
        </div>
</div>
        

                 
                 
                 <footer id = "footerContainer">
                    <button id = "githubBtn"><img class= "socials"</button> 
                    <button id = "linkedinBtn"><img class= "socials"</button> 
                    <button id = "instagramBtn"><img class= "socials"</button> 
                  
                  </footer>

Answer 1

如果您想保持手风琴的流动，您可以将页脚嵌套在整个容器中，然后根据您的意图使用 position: fixed 或 position: sticky。让我知道这对你有用。

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

.collapsible {

  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 2%;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}


.content {
  display: none;
}

.active,
.collapsible:hover {
  background-color: #555;
}

#footerContainer {
  position: aboslute;
  width: 100%;
  right: 0;
  bottom: 0;
  left: 0;
}

<div class="projectsContainer" id="projectsContainer">

  <button type="button" class="collapsible">Front End</button>

  <div class="content">
    <div class="Project">
      <h1 class="projectsTitle">Project</h1>
    </div>

      <div class="Project">
        <h1 class="projectsTitle">Project</h1>
      </div>
    </div>

  <button type="button" class="collapsible">Back End</button>

  <div class="content">
    <div class="Project">
      <h1 class="projectsTitle">Project</h1>
    </div>
      <div class="Project">
        <h1 class="projectsTitle">Project</h1>
      </div>
    </div>

  <button type="button" class="collapsible">Full Stack</button>

  <div class="content">
    <div class="Project">
      <h1 class="projectsTitle">Project</h1>
    </div>
      <div class="Project">
        <h1 class="projectsTitle">Project</h1>
      </div>
    </div>
                   
                 <footer id = "footerContainer">
                    <button id = "githubBtn"><img class= "socials"></button> 
                    <button id = "linkedinBtn"><img class= "socials"></button> 
                    <button id = "instagramBtn"><img class= "socials"></button> 
                  
                  </footer>
  </div>

页脚很粘，直到我展开手风琴（html、css、vanilla js）

Footer is sticky, until I expand my accordion (html, css, vanilla js)

html

javascript

css

accordion

sticky-footer