Bootstrap 4中不重叠页脚的粘性列答案

【问题标题】：Sticky Column in Bootstrap 4 That Doesn't Overlap FooterBootstrap 4中不重叠页脚的粘性列
【发布时间】：2021-03-06 19:21:11
【问题描述】：

我有一个包含多个列、一个页眉和一个页脚的页面。我希望列与用户一起滚动，但不与页脚重叠：

    <html>
    <head></head>
    <body>
        <div id="wrap">
            <div id="main" class="clear-top">
                <div class="col-lg-12">
                    <div class="row pl-4 justify-content-between pb-4">
                        <div class="col-lg-1 col-md-12 col-sm-12 ">
                         </div>

                         <div class="col-lg-7 col-md-12 col-sm-12 ">
                             ... Main Content ... 
                         </div>

                         <div class="col-lg-4 col-md-12 col-sm-12 p-4 sidebar-container">
                            ... Content I want to Scroll with User ...
                         </div>

                    </div>
                </div>
            </div>
        </div>
    </body>

    <footer class="footer">
        <div class="container">
        </div>
    </footer>
</html>

CSS：

// General Styling 
html, body{
    height: 100%; 
}

#wrap {
    min-height: 100%;
}

#main {
    overflow:auto;
    padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
    position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;
    padding-top:20px;
    width: 100%;
    bottom: 0; 
}

我使用的是 Bootstrap 4，所以我尝试将 sticky-top 类添加到我想要滚动的列中，但没有任何改变。

我尝试将列的position 更改为sticky，但似乎没有任何变化。我是否将其添加到错误的 div 中？

【问题讨论】：

对于初学者，我注意到您的 HTML 有几个错误：这是您的 html 的清理版本。 jsfiddle.net/d75qh3fx
footer 应该在 body 内。列必须是 row 的直接子代，而不是父列的直接子代。

标签： css bootstrap-4 sticky

【解决方案1】：

根据我的理解，您希望有一个可以在内容中浮动的侧边栏。如果是这种情况，这里就是解决方案。我使用了sticky-top，它将您的side-nav 贴在顶部。无需使用任何 CSS 将页脚与底部对齐。您可以在主容器中使用引导程序内置类 d-flex flex-column min-vh-100，在页脚中使用 mt-auto。这将使您的页脚与页面底部对齐

.custom-container {
  height: 500vh;
}

ul {
  list-style: none;
  padding: 0
}

footer {
  background: yellow
}

#side-nav {
  background: blue;
  height: 100%
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid d-flex flex-column min-vh-100">
  <div class="row">
    <div class="col-sm-4">
      <div id="side-nav">
        <ul class="sticky-top text-center">
          <li><button id=1>Link1</button></li>
          <li><button id=2>Link2</button></li>
          <li><button id=3>Link3</button></li>
        </ul>
      </div>
    </div>


    <div class="col-sm-8 ">
      <div class="custom-container">
        <h2>Content that scrolls</h2>
        <h5>What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a
          type specimen book it has?</h5>
      </div>
    </div>
  </div>
  <footer class="mt-auto">footer</footer>
  </body>
</div>

【讨论】：

我想要保留的 div 中的内容位于 row 中。我可以将sticky-top 应用于该行吗？
为您的内容创建一个包装器并将sticky-top 应用到它
我还必须从我的 #main div 中删除 overflow: auto