Question

我正在尝试将我的内容分为两列，其中第一列将用于全高度侧边栏，而另一列将包含我的导航栏，内容，页脚。

使用Bootstrap 4.0

这就是我想要做的：

我正在使用bootstrap 4示例中的粘性页脚示例，但是当我添加行和列时，页脚将在导航栏之后而不是占用整个html页面长度。

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set the fixed height of the footer here */
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}

    	
<div class="container-fluid">
  <div class="row">
  <div class="col-sm-2">
    Sidebar
  </div>
  <div class="col-sm-10">

    <div class="navbar">
      ...
    </div>

    <div class="content">
      test1
    </div>

    <footer class="footer">
      <div class="container">
        <span class="text-muted">Test</span>
      </div>
    </footer>

  </div>
  </div>
</div>

Answer 1

这是代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="compSec2" class="sec">
  <div id="compSec2Block1">
    <h3 class="dG" id="fastTitle"></h3>
  </div>
  <div id="compSec2Block2">
    <div id="compSec2Block2inner">
      <div class="compProdBlock" data-fast-name="Standard Fastener" data-fastImg="">
        <img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
        <div class="pTitleWrap">
          <div class="boxTitleWrap">
            <h2 class="boxTitle25">Standard Fastener</h2>
          </div>
        </div>
      </div>
      <div class="compProdBlock" data-fast-name="Universal Fastener">
        <img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
      </div>
      <div class="compProdBlock">
        <img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
      </div>
      <div class="compProdBlock">
        <img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
      </div>
    </div>
  </div>
</section>

检查小提琴：https://jsfiddle.net/zmye2pth/1/

Answer 2

由于你使用flex的bootstrap，你可以使用flex的力量制作一个粘性页脚 - 不需要给它一个绝对的位置。

<强> EXAMPLE

所以你的html保持不变只需要添加几个布局类。主要技术是使.main为一个弹性容器，并将其子元素重新定位在

列中

.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
}

而.content块必须拉伸剩余高度，从而将页脚按到底部，这可以通过简单的规则来实现：

.content {
  flex: 1;
}

有关此技术的更多信息here

Bootstrap 4 - Html / CSS：row-col

2 个答案: