تنظیم footer سایت در انتهای صفحه با html و css

سلام میخوام فوتر سایتم دقیقا در انتهای صفحه بچسبه. الان کدهایی که نوشتم فوتر میاد وسط صفحه قرار می گیره.

<footer class="text-left main-footer">

    <div class="row">
        <div class="col-md-2 col-xs-12"></div>
        <div class="col-md-8 col-xs-12"></div>
        <div class="col-md-2 col-xs-12"></div>
    </div>
</footer>

وقتی اجرا میکنم فوتر نمیره در انتهای صفحه بچسبه و وسط صفحه نمایش داده میشه. لطفا بفرمایید برای تنظیم footer سایت در انتهای صفحه با html و css باید دقیقا چیکار کنم ؟

مشخصات سوال کننده :

کاربر : pedram_khan امتیاز کاربر : 277 رتبه کاربر : 6

دسته بندی : Html Css

نظر ویرایش گزارش نشان

به این سوال امتیاز بدهید 0

تعداد بازدید این سوال : 6366

هوش مصنوعی

پاسخ هوش مصنوعی

برای اینکه فوتر سایت شما در انتهای صفحه قرار بگیرد، می توانید از CSS استفاده کنید تا به فوتر ویژگی های لازم را اعمال کنید. در زیر یک مثال کامل از کد HTML و CSS برای قرار دادن فوتر در انتهای صفحه آورده شده است.

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Footer Example</title>
</head>
<body>
    <div class="content">
        <h1>محتوای سایت</h1>
        <p>این قسمت شامل محتوای اصلی سایت شماست.</p>
    </div>

    <footer class="text-left main-footer">
        <div class="row">
            <div class="col-md-2 col-xs-12"></div>
            <div class="col-md-8 col-xs-12">فوتر سایت</div>
            <div class="col-md-2 col-xs-12"></div>
        </div>
    </footer>
</body>
</html>

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

.content {
    flex: 1;
}

.main-footer {
    background-color: #f8f9fa;
    text-align: center;
    padding: 20px 0;
}

در کد CSS بالا، از ویژگی flex استفاده شده است تا ساختار صفحه به صورت ستونی باشد. این کار باعث می شود که محتوای اصلی (داخل .content) فضای خالی را پر کند و فوتر در انتهای صفحه قرار گیرد.

به این پاسخ امتیاز بدهید 0

امتیاز: - رتبه: -

نظر ویرایش گزارش

پاسخ دهنده : fateme 02:26 1399/06/06

تنظیم footer سایت در انتهای صفحه با html و css

این کار رو به سادگی می تونید انجام بدید. کافیه یک کلاس به نام footer ایجاد کنید. البته نام کلاس دلخواه هست. و برای این کلاس استایل های زیر رو بنویسید :

    <style>
        .footer {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: red;
            color: white;
            text-align: center;
        }
    </style>

حالا کافیه به تگ footer خودتون این کلاس رو بدید. در واقع کد کامل شما به صورت زیر تبدیل میشه :

    <style>
        .footer {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: red;
            color: white;
            text-align: center;
        }
    </style>

<footer class="text-left main-footer footer">

    <div class="row">
        <div class="col-md-2 col-xs-12"></div>
        <div class="col-md-8 col-xs-12"></div>
        <div class="col-md-2 col-xs-12"></div>
    </div>
</footer>

حالا اگر اجرا کنید می بینید که فوتر سایت شما در انتهای صفحه ثابت شده. این کدها رو از این لینک میتونید ببینید.

به این پاسخ امتیاز بدهید 1

امتیاز: 1635 رتبه: 2

نظر ویرایش گزارش

آخرین سوالات ثبت ‌شده

سوالات مرتبط

آموزش های پرطرفدار

برای ارسال پاسخ لطفا وارد حساب کاربری خود شوید. ورود

تنظیم footer سایت در انتهای صفحه با html و css

پاسخ هوش مصنوعی

تنظیم footer سایت در انتهای صفحه با html و css

آموزش ساخت اتوماسیون اداری تحت وب

آموزش ساخت سیستم فروش و انبارداری وب

آموزش ساخت سیستم حقوق و دستمزد وب با سینکفیوژن

آموزش ساخت سیستم آزمونگیر آنلاین