使用 Bootstrap 进行页脚自适应定位答案

【问题标题】：Footer adaptative positioning with Bootstrap使用 Bootstrap 进行页脚自适应定位
【发布时间】：2017-02-12 02:08:23
【问题描述】：

我有一个简单的布局：

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

我希望页脚是：

当内容未填满所有剩余的视口空间时，位于视口底部，
在内容下方，在视口之外，如果内容填满了所有视口空间或更多空间，则可通过滚动到达。

换一种说法，我希望内容占用至少页眉和页脚留下的所有空间，如有必要，还可以将页脚推到视口之外。

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

如果我天真地让默认行为在内容很长但不是页脚在页面上太高时是完美的。

如果我尝试通过将页脚绝对定位在底部来修复页脚，则相反：当内容很短时完美，但当内容太长时它与内容重叠。

我已经看到并玩过一些没有 Bootstrap 的“幼稚”（硬编码页脚高度）示例：Absolute Positioning with Footer not working

即使它们也无法正常工作，因为 Bootstrap 正在“搞砸”。玩过我的样本后，我发现罪魁祸首是应用于所有container-fluid 的relative position。通过删除它，我在硬编码页脚高度的“天真”情况下得到了预期的行为。

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

至少在幼稚的情况下，
没有对页脚高度进行硬编码（可能需要一些 JS）？

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

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xl-12">
                Header<br/>
                Header<br/>
                Header<br/>
            </div>
        </div>
        
        <div class="row">
            <div class="col-xl-12">
                Content<br/>
                Content<br/>
                Content<br/>
                Content<br/>
                Content<br/>
                Content<br/>
                Content<br/>
                Content<br/>
                Content<br/>
                Content<br/>
                Content<br/>
                Content<br/>
                Content<br/>
                Content<br/>
                Content<br/>
                Content<br/>
                Content<br/>
                Content<br/>
                Content<br/>
                Content<br/>
                Content<br/>
                Content<br/>
                Content<br/>
                Content<br/>
                Content<br/>
                Content<br/>
                Content<br/>
                Content<br/>
                Content<br/>
                Content<br/>
            </div>
        </div>
        
        <div class="row footer">
            <div class="col-xl-12">
                Footer<br/>
                Footer<br/>
                Footer<br/>
            </div>
        </div>
    </div>
</body>

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4 twitter-bootstrap-4

【解决方案1】：

将以下样式添加到您的页脚：

position: absolute;
bottom: 0;

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

【讨论】：

谢谢，但是这种风格是我在我的问题中指定的，虽然当视口中有空间时它是完美的，但当没有空间时它就不起作用了。无论如何+1，因为这是anwser的一部分。 :)
你确定吗？我自己在一些网站上使用过它，它的工作方式与您描述的完全一样：即使有额外的空间，它也会留在底部，当内容溢出窗口时，它会转到页面的（可滚动的）底部。以this fiddle 为例。这是完全相同的设置，只是我复制了内容以使其可滚动。如您所见，页脚一直到页面底部。
这个小提琴确实有所有必要的部分。

【解决方案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>

【讨论】：

感谢您的回答，但我无法使其适应我的用例。无论如何+1，因为几乎所有需要的CSS黑魔法。 :-)

【解决方案3】：

感谢您的回答。

我终于达到了预期的行为：

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

我知道我远非天才，但所有这些 CSS 东西都超出了我的能力范围。 :'(

【讨论】：

【解决方案4】：

因为 flexbox 在 Bootstrap 4 中是默认的，所以这个“粘性”页脚很容易使用 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

【讨论】：