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。

希望有帮助。

Answer 2

$(document).ready(function(){
  var wheight= $(window).height();
  var contentheight=$(".content").height();
  if(wheight>contentheight){
    $("footer").addClass("fixedfooter");
  }
  else{
     $("footer").removeClass("fixedfooter");
}
})

*{
margin:0;
padding:0;
}
.sidebar {
   height: 100vh;
  float:left;
  width:20%;
  background:red;
}
.wrapper{
  overflow:hidden;
}
.page{
  width:80%;
  float:left;
  
}
.content{
  width:100%;
  height:200px;
  background-color:green;
}
footer {
  width:calc(100%);
  height:50px;
  background-color:blue;
}

.fixedfooter{
  position:fixed;
  right:0;
  bottom:0;
  width:calc(100% - 20%)!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="sidebar">sidebar</div>
  <div class="page">
    <div class="content">my content</div>
    <footer>my footer </footer>
  </div>
</div>

jQuery就是这样！当内容高度不高于窗口高度时，将具有固定位置的类应用于页脚！尝试更改内容的高度以检查结果！

Answer 3

.sidebar {
   height: 100vh;
  width:20%;
  background:red;
}
.wrapper{
  display:flex;

}
.page{
  width:80%;
    display:flex;
  flex-direction:column;
  justify-content: space-between;
  height:;
  
}
.content{
  width:100%;
  height:200px;
  background-color:green;
}
footer {
  width:calc(100%);
  height:50px;
  background-color:blue;
}

<div class="wrapper">
  <div class="sidebar">sidebar</div>
  <div class="page">
    <div class="content">my content</div>
    <footer>my footer </footer>
  </div>
</div>

这是只有CSS的另一种方法！

Answer 4

我通过使用w3schools.com上的代码完成了这项工作

.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;
}

<!DOCTYPE html>
<html>
<body>
<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>

<div class="footer">
  <p>Footer</p>
</div>

</body>
</html>

将页脚对准内容的底部，推到侧栏的右侧

4 个答案: