چطور میتونم فوتر رو به پایین صفحه در بوت استرپ 5 بچسبونم؟
How to flush footer to the bottom of the page in Bootstrap 5?
من دارم با بوت استرپ 5 کار می‌کنم و می‌خوام فوتر رو همیشه در پایین صفحه بچسبونم، حتی زمانی که محتوای صفحه کم باشه و نیازی به اسکرول نباشه. چطور میتونم این کار رو انجام بدم؟
سلام برای اینکه فوتر همیشه پایین صفحه بچسبه، حتی وقتی محتوا کم باشه، میتونی از ترکیب بوت استرپ 5 و یکم CSS استفاده کنی. اینجا یک روش ساده برای این کار بهت می‌گم
باید ساختار HTML تو به این شکل باشه که یک عنصر wrapper یا content برای محتوای اصلی داشته باشی و فوتر رو جدا از اون قرار بدی.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sticky Footer Example</title>
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css"
rel="stylesheet"
/>
<style>
html,
body {
height: 100%;
}
.content {
flex: 1;
}
.footer {
background-color: #f8f9fa;
padding: 10px;
text-align: center;
}
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a sample page content.</p>
</div>
</div>
<footer class="footer"><p>© 2024 Your Company</p></footer>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
تو css
html, body باید ارتفاع 100% تنظیم بشه تا صفحه کامل بشه.
برای wrapper استفاده از Flexbox برای اینکه محتوا و فوتر در یک ستون قرار بگیرند و فوتر همیشه در پایین صفحه باشه.
تو content محتوا رو نگه می‌داره و با خاصیت flex: 1 اجازه میده که محتوا فضای لازم رو بگیره و فوتر در پایین بمونه.
و footer برای طراحی ساده فوتر که در پایین صفحه ثابت میمونه.
با این روش فوتر همیشه در پایین صفحه نمایش داده میشه امیدوارم این راه حل به کارت بیاد و مشکلت رو حل کنه