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

تنظیم 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>

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