Question

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

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

如果内容很大，这会在页面的底部显示页脚；如果内容很小，这会在屏幕的底部显示页脚，这是我想要的，但它也位于.wrapper div中，如果将其打开，请更改所有内容的大小以使其变小（因为侧边栏现在占据了屏幕的一部分），问题是...如何使页脚在页面/屏幕的底部绘制，以及还尊重尺寸变化吗？

我已经进行了更改position: absolute;属性的测试，并使用了其他position值进行了大小更改，但它并未停留在底部。

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

感谢您的耐心！

Answer 1

这感觉很hacky，但是我尝试在simple-sidebar的演示页面上没有任何js的情况下进行操作。在“页面内容包装器” div中，与我添加的内容的“容器流体” 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。

更多评论可在下面的代码段中找到。

希望对您有所帮助：）

//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>

页脚不会用侧边栏更改大小

2 个答案: