Bootstrap 页脚自适应定位

Question

我有一个简单的布局：

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

我希望页脚是：

当内容未填满所有剩余视口时在视口底部 space、
内容下方，视口外，如果内容填满整个视口 space 或更多，则可通过滚动到达。

换句话说，我希望内容至少页眉和页脚遗漏的所有space，如有必要，可将页脚推到视口外 .

要添加到等式中，我想 不对页脚的高度进行硬编码 ，因为我猜它的内容大小可能会因 browser/device 而异.

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

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

我看过并玩过一些没有 Bootstrap 的 "naive"（硬编码页脚高度）样本：

甚至他们都没有工作，因为 Bootstrap 是 "messing things up"。玩过我的示例后，我发现罪魁祸首是应用于所有 container-fluid 的 relative position。通过删除它，我在具有硬编码页脚高度的 "naive" 案例中得到了预期的行为。

那么如何使用 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>

Answer 1

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

position: absolute;
bottom: 0;

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

Answer 2

我以前做过很多次，老实说，作为一个 back-end 开发者，这总是一个危险。我公司的某个人对我进行训练时，每次都有一个技巧对我有用。您需要将所有内容包装在一个新的 container/wrapper 中，页脚除外，然后执行类似的操作（这是从我几年前创建的一个工作示例中复制粘贴的）。

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,
为 html 设置 position: relative（我想 footer 相对于它定位），
设置min-height: 100%为html（这是我考虑的black-magic），
动态设置 body 的 bottom-margin 为 footer 的高度： document.body.style.marginBottom = footer.clientHeight + "px";

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

Answer 4

因为 flexbox 在 Bootstrap 4 中是默认的，这个 "sticky" 页脚很容易使用 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 页脚自适应定位

Footer adaptative positioning with Bootstrap

html

css

twitter-bootstrap

bootstrap-4

twitter-bootstrap-4