页脚不使用我的侧边栏更改大小

Question

所以...我的页脚的“位置”属性有问题。

footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 3;
}

如果内容很大，这会将我的页脚绘制在页面的最底部，如果内容很小，则将页脚绘制在屏幕的底部，这是我想要的，但它也在 .wrapper div 内，它如果打开，更改所有内容的大小，使其更小（因为侧边栏现在占据了屏幕的一部分），问题是......我如何让我的页脚在页面/屏幕底部绘制并尊重大小变化？

我已经对更改 position: absolute; 属性进行了测试，并使用其他位置值来更改大小，但不会停留在底部。

侧边栏：https://startbootstrap.com/template-overviews/simple-sidebar

感谢您的耐心等待！

Answer 1

这感觉很hacky，但我尝试在simple-sidebar的演示页面上不使用任何js。在“page-content-wrapper”div 中，与我添加的内容的“container-fluid”div 处于同一级别

footer{
  position: fixed;
  bottom: 0;
  width: 100%;
  margin-left: -20px;
  z-index: 3;
}

如果你使用 left:0 似乎侧边栏会超过 20px 的位置。

我觉得要真正获得一个不错的解决方案，您应该在调整侧边栏的同时使用 JS 来调整页脚的大小。

希望对你有所帮助

Answer 2

所以这是我对你问题的解释：

要使页脚固定在底部，您需要做的基本上是将所有 padding-left etc. 属性更改为底部固定页脚等效项。

另外，由于您想要一个底部变体，我假设您仍然希望能够在切换栏时查看页面上的所有内容（该示例隐藏了向右移动到窗口外的内容） .为此，页面内容需要position: relative。

---

更多的cmets可以在下面的sn-p中找到。

希望对您有所帮助:)

//Simulate JS from the sample site
document.getElementById("menu-toggle").addEventListener("click", function(){
  document.getElementById("wrapper").classList.toggle("toggled");
})



// Remove annoying margin from example box *Ignore* this for personal use
document.body.style.margin = "0px";

#wrapper {
  margin: 0;
  padding-bottom: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  font-family: monospace; /* Always choose a nice font ;) */
}

#wrapper.toggled {
  padding-bottom: 60px; /* Create a space for the footer at the bottom of the page */
}

#footer-wrapper {
  z-index: 1000;
  position: fixed;
  bottom: 60px; /* Offset from bottom */
  left: 0;
  width: 100%;
  height: 0px; /* Height for the footer */
  margin-bottom: -60px; /* Initially hide the footer */
  overflow: hidden; /* Just for the example */
  background: #000;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#wrapper.toggled #footer-wrapper {
  height: 60px; /* when toggled, make the footer visible */
}

#page-content-wrapper {
  width: 90%;
  position: relative; 
  padding: 5%;
}

#wrapper.toggled #page-content-wrapper {
  position: relative; /* make relative to keep seeing the page content */
  margin-top: -60px; /* Move content up by 60px*/
  padding-top: 60px; /* Make sure no content is hidden from page*/
}


/* Responsive Styles */

@media(min-width:768px) {
  #wrapper {
    padding-bottom: 0;
  }
  #wrapper.toggled {
    padding-bottom: 60px;
  }
  #footer-wrapper {
    height: 0px;
  }
  #wrapper.toggled #footer-wrapper {
    height: 60px;
  }
  #page-content-wrapper {
    padding: 20px;
    position: relative;
  }
  #wrapper.toggled #page-content-wrapper {
    position: relative;
    margin-top: 0;
  }
}

<div id="wrapper">

  <!-- Footer -->
  <div id="footer-wrapper">
    <h1 style="
    color:  white;
">They see me going, they hatin'</h1>
  </div>
  <!-- /#footer-wrapper -->

  <!-- Page Content -->
  <div id="page-content-wrapper">
    <div class="container-fluid">
      <h2>Simple Footer</h1>
      <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page
        content will be pushed off canvas.</p>
      <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
      <a href="#menu-toggle" class="btn btn-secondary" id="menu-toggle">Toggle Menu</a>
    </div>
  </div>
  <!-- /#page-content-wrapper -->

</div>