顯示內容不足時，頁腳不會停留在頁面底部

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