html - 对齐内容底部的页脚，推到侧边栏的右侧

Question

我想将页脚放在内容的底部，但不要横跨页面的整个宽度。如果内容未放置，则页脚应始终位于底部，如图 1 所示。可以通过 navbar 上的按钮位置切换侧边栏。

我只能得到如下所示:

侧边栏应该将页脚推到右边，但它总是在顶部。因为，当侧边栏隐藏或折叠时，页脚应占据页面的宽度，因为占据了购买内容。

HTML 实现采用以下结构:

<div class="wrapper">
   <!-- Navbar -->
   <nav class="navbar navbar-expand-sm fixed-top navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
      <div class="container-fluid">
      </div>
   </nav>
   <!-- Sidebar -->
   <div id="sidebar" class="shadow-sm"></div>
   <!-- Page Content -->
   <div id="content">
      <div class="container-fluid">
         <div class="card">
            <div class="card-body">
               <h1>
                  Collapsing Menu
                  <small class="text-muted">Version 2.1</small>
               </h1>
            </div>
         </div>
      </div>
   </div>
</div>
<footer id="page-footer" class="py-3 bg-dark text-light">
   <div class="container">

   </div>
</footer>

页脚和侧边栏的 CSS:

footer {
    bottom: 0;
    left: 0;
    position: fixed;
    width: 100%;
}
#sidebar {
    margin-top: 54px;
    width: 250px;
    position: fixed;
    top: 0;
    left: 0;
    height: calc(100vh - 55px);
    z-index: 999;
    padding: 10px;
    -webkit-transition: right .5s ease,left .5s ease;
    -moz-transition: right .5s ease,left .5s ease;
    -o-transition: right .5s ease,left .5s ease;
    transition: right .5s ease,left .5s ease;
}

Answer 1

我建议将页脚放在 ID 为“content”或类为“container-fluid”的 div 中。

看看它是如何工作的。

长版本:您的页脚当前根据其父上下文进行间隔。在当前版本中，您放置页脚的上下文不在您发布内容的范围内 - 这意味着，就处理而言，页脚不知道内容容器。此处最快的解决方案是将页脚放在包含内容的容器的上下文中。这样，页脚包含在显示内容的同一个 div 中。它是否触及屏幕底部取决于您的 css。

希望对您有所帮助。