Question

我有一个简单的布局：

+----------+
|  Header  |
+----------+
|          |
| Content  |
|          |
+----------+
|  Footer  |
+----------+

我希望页脚是：

在视口底部，当内容未填满所有剩余的视口空间时，
在视口外部的内容下，如果内容填满所有视口空间或更多内容，则可通过滚动访问。

以另一种方式说我希望内容至少至少页眉和页脚留下的所有空间，如有必要，还可以将页脚推到视口外

要添加到等式中我想不硬编码页脚的高度，因为我猜其内容的大小可能因浏览器/设备而异。

如果我天真地保留默认行为，当内容很长但页面上的页脚不太高时，它就是完美的。

如果我试图通过将页脚完全放在底部来修复页脚，那就是另一种方式：内容很短时完美但当内容太长时它与内容重叠。

我看过并玩过一些没有Bootstrap的“天真”（硬编码的页脚高度）样本：Absolute Positioning with Footer not working

即使他们没有工作，因为Bootstrap“搞砸了”。在使用我的示例后，我发现罪魁祸首是应用于所有relative的{{1}} position。通过删除它，我得到了具有硬编码页脚高度的“天真”情况下的预期行为。

那么如何使用Bootstrap获得预期的行为：

至少在天真的情况下，
没有硬编码页脚高度（可能需要一些JS）？

container-fluid

/*.footer {
  position: absolute;
  bottom: 0px;
}*/

Answer 1

将以下样式添加到页脚：

position: absolute;
bottom: 0;

这里有一个Bootstrap 4的工作示例：http://v4-alpha.getbootstrap.com/examples/sticky-footer-navbar/导航栏和页脚之间的容器也有position: relative;，所以你不应该有任何问题。

Answer 2

我之前已多次这样做，并且说实话，作为一名后端开发人员，它始终是一种危险。对我来说每次都有一个技巧可以让我公司的某些人找我。你需要将所有内容包装在一个新的容器/包装器中，除了页脚，然后执行类似的操作（这是我几年前创建的一个工作示例中粘贴的副本）。

footer {
    height: 75px;
    background-color: #34495e;
    margin-bottom:0;
    position: relative;
}

footer .row, footer > .row > .col-lg-12 {
    height: 75px;
}

html, body {
    height: 100%;
}

#container {
    min-height: 100%;
    height: auto !important;

    margin: 0 auto -75px;
    background-color:#f2f2f2;
}

#container:after {
        display: block;
        width: 100%;
        content: "";
        height: 75px;
}

和HTML：

<div id="container"> 

    <nav class="navbar navbar-inverse" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <div id="logo" ></div>
              <h1><a class="navbar-brand" href="http://localhost" style="color:white">Trapetaf.be</a></h1>
            </div>

            <div class="collapse navbar-collapse">
              <ul class="nav navbar-nav navbar-right">
                <li class="{{ Request::is( 'history') ? 'active' : '' }}"><a href="{{URL::to('history')}}">History</a></li>
                <li class="{{ Request::is( 'leaderboard') ? 'active' : '' }}"><a href="{{URL::to('leaderboard')}}">Leaderboard</a></li>
                <li class="{{Request::is('challenges/*')  ? 'active' : '' }}"><a href="{{URL::to('challenges')}}">Challenges</a></li>
                <li class="{{Request::is('statistics*')? 'active': ''}}"><a href="{{URL::to('statistics')}}">Statistics</a></li>
                <li class="{{ Request::is( 'login*') || Request::is('aanmelden*') ? 'active' : '' }}"><a href="{{URL::to('login')}}" >Inloggen</a></li>
                   @if(Auth::check())
                    <li class="{{ Request::is( 'admin*') ? 'active' : '' }}"><a href="{{URL::to('admin')}}">Admin</a></li>
                 @endif
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container -->
        </nav>

 @yield('content')

</div>

      <footer>
        <div class="row">
          <div class="col-md-12">
           <p> &copy; <?php echo Date('Y')?> Trapetaf.be</p>
          </div>
        </div>
      </footer>

Answer 3

谢谢你的赞美诗。

我终于通过以下方式达到了预期的行为：

为position: absolute，

bottom: 0px

footer

为position: relative设置html（我想这是footer相对于它的位置），
为min-height: 100%设置html（这是我认为是黑魔法的那个），
将正文的bottom-margin动态设置为footer的高度： document.body.style.marginBottom = footer.clientHeight + "px";

我知道我远非一个天才，但所有这些CSS的东西都超出了我。：＆＃39;（

Answer 4

因为flexbox在Bootstrap 4中是默认的，所以＆＃34;粘性＆＃34;使用flexbox很容易页脚..

<wrapper class="d-flex flex-column">
    <nav>
    </nav>
    <main>
    </main>
    <footer>
    </footer>
</wrapper>

body, wrapper {
   min-height:100vh;
}

main {
    flex:1;
}

演示：Bootstrap 4 Sticky Footer with Flexbox

使用Bootstrap进行页脚适应性定位

4 个答案: