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

Question

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

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

这是我的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>

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

我阅读了我能找到的每一个 SO 问题，但似乎没有任何效果。

任何帮助表示赞赏！

Answer 1

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

Answer 2

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

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

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

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

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

问题描述

2 个解决方案

解决方案1
0 2022-01-09 11:32:06

解决方案2
0 2022-01-10 10:40:54

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

问题描述

2 个解决方案

解决方案1 0 2022-01-09 11:32:06

解决方案2 0 2022-01-10 10:40:54

解决方案1
0 2022-01-09 11:32:06

解决方案2
0 2022-01-10 10:40:54