Footer doesn't stay on bottom of page when not enough content is displayed
Question
I know this question gets asked often, I already googled a lot but did not find a solution.
I am trying to place my footer at the bottom of the page all the time, so even when not enough content is in the page.
Here is my app.blade.php code: (I shortened it a bit)
<!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>
I tried tinkering with the tailwind position attributes, so absolute, relative etc. I tried inset-x-0 bottom-0 and nothing works.
I read every SO question I could find about it but nothing seems to work.
Any help appreciated!
2 answers
solution1
0 2022-01-09 11:32:06
give to your main div min-height:100vh and then your footer put on the bootom section.
solution2
0 2022-01-10 10:40:54
Either use a min-height for your body or main element. Like AkifObaidi suggested - as in:
body{ min-height: 80vh; } /* adapt to your needs - what is the least high page, test it out there */
Or you go with a position:fixed footer - making it stick to the bottom of your viewport, not the page:
footer{ position: fixed; bottom: 0; left: 0; width: 100%; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.