نحوه ایجاد فوتر ثابت برای وب سایت به پنج روش مختلف

اکثر وب سایت‌ها دارای دو مؤلفه مشترک هستند، هدر و فوتر. هدر همیشه در بالای صفحه وب و فوتر در پایین صفحه مشاهده می‌شود.

هدر معمولاً حاوی منو، فرم جستجو و ... است. در حالی که فوتر حاوی اطلاعات تکمیلی است. منظور از فوتر قسمت پایین صفحه وب است اما بعضی اوقات و به دلیل برخی شرایط خاص ممکن است در انتهای صفحه نباشد.

در ابتدای طراحی خود، اگر صفحه وب دارای محتوای کافی است، ممکن است احساس کنید که فوتر درست در جایی است که متعلق به آن است، اما وقتی صفحه را بزرگنمایی می‌کنید، متوجه می‌شوید که اینگونه نیست.

در تصویر زیر صفحه وب از محتوای کافی برخوردار نیست و فوتر در پایین صفحه در جای درستی نیست.

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

قبل از اینکه به مثال‌های کد و توضیحات بپردازیم، بهتر است روش‌ها را ذکر کنیم تا تصویری واضح از کارهایی که می‌خواهیم انجام دهیم داشته باشیم. روش‌ها عبارتند از:

موقعیت یابی CSS (مطلق و ثابت)
CSS Flexbox
Wrapper push با Flexbox
تابع calc() با Flexbox
جی کوئری با CSS Flexbox

موقعیت عناصر در CSS: مطلق

قرار گرفتن مطلق عناصر به توسعه دهنده این امکان را می‌دهد تا عنصر صفحه را با استفاده از ویژگی‌های افست مانند بالا و پایین قرار دهد. هنگامی که عنصر والد موقعیت پیش فرض را دارد. استاتیک عناصر نسبت به نمای مرورگر قرار می‌گیرد، در غیر این صورت نسبت به عنصر والد انجام می‌شود.

ما می‌توانیم از این رفتار برای قرار دادن فوتر در پایین صفحه استفاده کنیم.

چگونه کار می‌کند

در کد CSS ، ارتفاع html و body 100٪ تنظیم شده است، بنابراین صفحه وب، از ارتفاع مدنظر اشغال می‌کند.

در HTML عنصر body باید شامل عنصر درونی و ترجیحاً div باشد.

div دارای خصوصیت موقعیتی نسبی در CSS است و یک ویژگی حداقل ارتفاع 100٪ را نشان می‌دهد و فوتر را به عنوان عنصر فرزند خود شامل می‌شود.

body باید دارای یک padding-bottom باشد که مقدار آن برابر با ارتفاع فوتر است. اگر این بخش را انجام ندهیم، وقتی اندازه صفحه وب به یک درصد مشخص برسد، محتوای صفحه توسط فوتر پوشیده می‌شود.

با فرض اندازه پیش فرض مرورگر px16، این باید حدود 240٪ سطح زوم باشد.

کد

در قسمت زیر کدهای HTML و CSS برای توضیحات قبلی آورده شده است.

HTML

<body>
  <div class="container">
    <!-- Put your content here -->

    <footer>
        <!-- Put footer content here -->
    </footer>
  </div>
</body>

CSS

html,
body {
    padding: 0;
    height: 100%;
}

.container {
    min-height: 100%;
    position: relative;
}

body {
    padding: 10px;
    padding-bottom: 60px;   /* Height of the footer */
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;              /* Height of the footer */
    background: #1560bd;
}

مزایا

پیاده‌سازی آسان

معایب

کد HTML به دلیل اینکه در حالت عادی دارای فوتر است، مورد استفاده قرار می‌گیرد. و به این دلیل نیست که این کار در یک پایگاه بزرگ کد انجام می‌شود.

موقعیت عناصر در CSS: ثابت

این شبیه به همتای موقعیت مطلق آن است و از کد کمتری استفاده می‌کند.

چگونه کار می‌کند

در CSS، به عنصر body موقعیت نسبی داده می‌شود و فوتر با استفاده از ویژگی‌های افست، موقعیت ثابت را ارائه می‌دهد.

کد

در قسمت زیر قطعه کد مربوط به فوتر ثابت با استفاده از موقعیت ثابت CSS آورده شده است.

HTML

<body>
    <header>
        <!-- Put header content here -->
    </header>

    <main>
        <!-- Put main content here -->
    </main>

    <footer class="sticky">
        <p>This is a footer</p>
    </footer>
</body>

CSS

body {
    position: relative; /* Sets up positioning for your footer
*/
}

.sticky {
    position: fixed; /* Here's what sticks it */
    bottom: 0; /* to the bottom of the window */
    left: 0; /* and to the left of the window. */
    height: 44px;
    width: 100%;
    padding-top: 20px;
    background: #000000;
    color: #ffffff;
    text-align: center;
}

مزایا

پیاده‌سازی آسان با کد کمتر

معایب

استفاده از موقعیت ثابت برای یک فوتر ممکن است در واقع به صورت یک مدرسه قدیمی به نظر برسد.

CSS Flexbox

یک فوتر ثابت با Flexbox مدرن‌تر به نظر می‌آید. همچنین از کد کمتری استفاده می‌کند و تقریباً خود بیانگر همه چیز است. اما هنوز قصد داریم نحوه عملکرد آن را توضیح دهیم.

چگونه کار می‌کند

ترفند تغییر ویژگی نمایش body به flex و تنظیم جهت flex به ستون است. علاوه بر این، ارتفاع عنصر body باید حداقل vh100 باشد (ارتفاع چشم‌انداز فعلی). با این تصور، مشخص است که باید از ویژگی حداقل ارتفاع (min-height) استفاده کنیم.

ویژگی حداقل ارتفاع به مرورگر می‌گوید که از vh100 به عنوان حداقل مقدار استفاده کرده و در صورت لزوم تغییر کند.

قبل از فوتر باید نوعی فضا وجود داشته باشد که خاصیت انعطاف پذیری آن را بر روی 1 قرار دهد.

کد

در قسمت زیر کد HTML و CSS برای ایجاد فوتر ثابت با CSS Flexbox ارائه شده است.

HTML

<body>
    <main>
        <p> <!-- Put text here --> </p>
    </main>

    <footer>
        <!-- Put footer content here -->
    </footer>
</body>

CSS

body {
    display: flex;
    flex-flow: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background-color: #f9f9fa;
}

main {
    flex: 1;
}

footer {
    width: 100%;
    text-align: center;
}

مزایا

اگر بدانید Flexbox چگونه کار می‌کند، کد ساده و خوانا است.

معایب

vh100 برای ویژگی حداقل ارتفاع مرتبط با body در اکثر مرورگرهای تلفن همراه به دلیل ارتفاع قابل مشاهده، تغییرپذیر است. آنها منوهای مرورگر بالا و پایین را مخفی می‌کنند.

Wrapper push با Flexbox

Wrapper push یک تکنیکی است که قبل از آخرین عنصر در صفحه وب، به صورت علائم اضافی وجود دارد. معمولاً در فوتر.

div یک ارتفاعی را در نظر می‌گیرد و این مقدار ارتفاع از پایین wrapper کم می‌شود.

wrapper چیست؟wrapper ظرفی است که حاوی بیشتر محتوای صفحه وب است.

علاوه بر این، عنصر html و body باید دارای یک ارتفاع 100٪ باشند.

چگونه کار می‌کند

سه پاراگراف آخر را بخوانید.

کد

کد مشابه نمونه‌های قبلی است، اما به مقادیر حاشیه منفی در CSS توجه داشته باشید.

HTML

<body>
    <div class="wrapper">
        <!-- Put page content here -->

        <div class="push"></div>

    </div>

    <div class="footer">
        <!-- Put footer content here -->
    </div>
</body>

CSS

html,
body {
    height: 100%;
    margin:0;
    padding: 0;
}

.wrapper {
   min-height: 100%;
   margin-bottom: -120px; /* Same as push height */
   padding: 10px;
}

.push {
    height: 120px; /* The space between the last element and footer*/
}

.footer {
    background-color: #000;
    color: #fff;
    height: auto;
    width: 100%;
}

مزایا

پیاده‌سازی آسان

معایب

نشانه گذاری اضافی

تابع calc() در CSS با Flexbox

این کار مشابه با روش قبلی اما با تفاوت‌های قابل توجه است. اولا هیچ نشانه اضافی وجود ندارد. ثانیا ارتفاع wrapper ها با تابع calc() در CSS محاسبه می‌شود.

تابع calc() درCSS محاسبه‌ای را انجام می‌دهد که از آن به عنوان مقدار خصوصیت استفاده خواهد شد.

علاوه بر این، body و html باید 100٪ ارتفاع داشته باشند.

چگونه کار می‌کند

سه پاراگراف آخر را بخوانید.

کد

کد مشابه قطعه کد قبلی است.

HTML

<body>
    <div class="wrapper">
        <!-- Put the website content here -->
    </div>

    <div id="footer">
        <!-- Put the footer content here -->
    </div>
</body>

CSS

html,
body {
    height: 100%;
    margin: 0;
}

.wrapper {
    min-height: calc(100vh - 170px);
    padding: 10px;
}

.footer {
    display: flex;
    background-color: #000;
    color: #fff;
    height: 170px;
    width: 100%;
}

مزایا

ارتفاع wrapper به طور خودکار محاسبه می‌شود.

معایب

این روش بعد از زوم 350٪ از کار می‌افتد.

جی کوئری با CSS Flexbox

جی کوئری یک کتابخانه جاوااسکریپت است که به منظور سهولت در دستکاری DOM طراحی شده است. هنگامی که در پروژه خود از جی کوئری استفاده می‌کنید، می‌توانید با سهولت فوتر را در پایین صفحه بچسبانید.

چگونه کار می‌کند

محتوای وب سایت باید در یک فضای wrapper در HTML باشد. در CSS، wrapper باید دارای حداقل ارتفاع 100٪ باشد.

همچنین html و body نیز باید 100٪ ارتفاع داشته باشد.

به علاوه یک نشانه گذاری اضافی نیز وجود دارد که برای تغییر اندازه فوتر در پایین صفحه استفاده می‌شود. این نشانه گذاری قبل از تگ بسته شدن wrapper قرار خواهد گرفت.

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

مقدار آن از پایین wrapper با استفاده از مقدار padding-bottom و hard-coded در CSS جدا شد.

اما در اینجا با تغییر اندازه پنجره مرورگر، مقدار به طور خودکار با جی کوئری محاسبه می‌شود.

کد

این کد شاملHTML ، CSS و کد jQuery است.

HTML

<div class="wrapper">
    <main class="main">
    </main>
    <div class="push"></div>
</div>

<footer class="footer">
</footer>

CSS

html,
body {
    height: 100%;
    margin: 0;
}

.wrapper {
    min-height: 100%;
}

.main {
    padding: 1em;
}

jQuery

$(document).ready(function () {
    $(window).resize(function () {
        var footerHeight = $(".footer").outerHeight();
        var stickFooterPush = $(".push").height(footerHeight);

        $(".wrapper").css({
            marginBottom: "-" + footerHeight + "px",
        });
    });

    $(window).resize();

});

مزایا