چسباندن فوتر به پایین صفحه

تقریبا همه مرورگر ها این روش را پشتیبانی میکنند و از این بابت مشکلی نخواهید داشت .

برای اینکه فوتر شما همیشه به پایین صفحه بچسبه باید کد زیر رو به استایل خودتون اضافه کنین

دقت کنین که مقدار margin در .wrapper دقیقا با ارتقاع .footer و .push یکسان است.( که شامل هر padding یا bordre ی که شما اضافه کنید نیز میشود)

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}

 

و html شما باید چیزی شبیه به این باشد :

چیزی خارج از wrapper نباشد و داخل push چیزی نباشد .

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2016</p>
        </div>
    </body>
</html>

و اگر با چند ستون سر و کار دارین و  float  و … :

.footer, .push {
clear: both;
}

 

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *