Question

我有一个laravel项目，其中添加了bootstrap作为CSS。我已经尝试过任何方法来使页脚保持正常工作，但是页面一旦变长，则窗口向上滚动时，窗口就会停留在窗口底部。

我的主：

<html>
<head>
    <title>Justin van Horssen</title>
    {{-- Bootrstrap 4.1.1 CSS --}}
    <link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}">

</head>
<body>
    <header>
        @include('inc.nav')
    </header>
    <main role = "main" class="container">
        @include('inc.messages')
        @yield('content')
    </main>
    @include('inc.scripts')
    <footer class="footer">

    </footer>
</body>

我的页脚CSS：

.footer

    {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 60px;
        line-height: 60px;
        background-color: #003b6f;
    }

Answer 1

html或body CSS可能有问题。

根据bootstrap 4 doc，css应该类似于...

 html {
    position: relative;
    min-height: 100%;
  } 

 Body { margin-bottom:60px; }

您的页脚类别还可以。

有关获取粘页脚的更多方法，请在此处查看： https://css-tricks.com/couple-takes-sticky-footer/

谢谢..希望对您有所帮助。

Laravel Boostrap粘性页脚

1 个答案: