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

Question

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

    <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 class 添加到我想要滚动的列中，但是没有任何改变。

我已经尝试将列的 position 更改为 sticky，但似乎还是没有任何改变。我是不是加错了div？

Answer 1

据我了解，您希望有一个浮动在内容中的边栏。如果是这种情况，这里就是解决方案。我使用 sticky-top 将您的 side-nav 贴在顶部。无需使用任何 CSS 将页脚与底部对齐。您可以对主容器使用 bootstrap 内置 class 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>

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

Sticky Column in Bootstrap 4 That Doesn't Overlap Footer

css

sticky

bootstrap-4