显示内容不足时，页脚不会停留在页面底部答案

【问题标题】：Footer doesn't stay on bottom of page when not enough content is displayed显示内容不足时，页脚不会停留在页面底部
【发布时间】：2022-01-10 18:40:54
【问题描述】：

我知道这个问题经常被问到，我已经用谷歌搜索了很多但没有找到解决方案。

我一直试图将页脚放在页面底部，因此即使页面中没有足够的内容。

这是我的app.blade.php 代码：（我缩短了一点）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Finanzraketen</title>

    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    <style>
        .hintergrund {
            background-image: url('/background.jpeg');
            background-size: cover;

        }
    </style>
</head>


<body class="hintergrund pb-18">
<!-- Navbar goes here -->
<nav class="bg-white shadow-lg bg-gradient-to-r from-green-400 to-blue-500 mb-10 h-20">
    <div class="max-w-full mx-auto px-4">
        <div class="flex justify-between">
            <div class="flex space-x-0">
                
                <!-- Primary Navbar items -->
                <div class="hidden md:flex items-center space-x-3">
                    <ul class="flex items-center pl-2 grid grid-cols-8 gap-2">

                        <a class="py-2 px-2 font-medium text-black rounded shadow transition text-sm border-2 border-black border-opacity-20 text-center
                    duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100"
                           href="{{ route('overview') }}">Stellenanzeigen</a>


                        @auth('web')
                            <a class="py-2 px-2 font-medium text-black rounded shadow transition text-sm border-2 border-black border-opacity-20 text-center
                    duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100"
                               href="{{ route('alle_bewerbungen') }}">Bewerbungen</a>


</nav>
@yield('content')
<footer class="bg-gradient-to-r from-green-400 to-blue-500 opacity-60 p-4 relative w-full">
<div class="bg-light py-4">
    <div class="container text-center">
        <p class="text-muted mb-0 py-2">© 2019 Bootstrapious All rights reserved.</p>
    </div>
</div>
</footer>
</body>

</html>

我尝试修改顺风位置属性，所以absolute, relative 等。我尝试了inset-x-0 bottom-0，但没有任何效果。

我阅读了所有我能找到的关于它的 SO 问题，但似乎没有任何效果。

任何帮助表示赞赏！

【问题讨论】：

标签： html css laravel laravel-blade tailwind-css

【解决方案1】：

给你的主 div min-height: 100vh; 然后你的页脚放在底部。

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

为您的身体或主要元素使用最小高度。就像 AkifObaidi 建议的那样 - 如下所示：

body{ min-height: 80vh; } /* adapt to your needs - what is the least high page, test it out there */

或者你使用 position:fixed footer - 让它粘在你的视口底部，而不是页面：

footer{ position: fixed; bottom: 0; left: 0; width: 100%; }

【讨论】：