چگونه یک فوتر چسبان در CSS بسازیم: آموزش ساخت فوتر ثابت و همیشگی

< ! DOCTYPE html >
< html lang="fa" >
< head >
  < meta charset="UTF-8" >
  < meta name="viewport" content="width=device-width, initial-scale=1.0" >
  < title > فوتر چسبان با Flexbox < / title >
  < style >
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* تنظیم کانتینر اصلی به عنوان Flexbox */
    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        font-family: Arial, sans-serif;
    }

    /* تنظیم محتوای اصلی با فضای خودکار */
    .content {
        flex: 1;
        padding: 20px;
        background-color: #f9f9f9;
    }

    /* استایل‌دهی به فوتر */
    footer {
        background-color: #333;
        color: white;
        text-align: center;
        padding: 10px;
    }
  < / style >
< / head >
< body >
  < div class="content" >
    < h1 > محتوای اصلی < / h1 >
    < p > اینجا محتوای اصلی صفحه قرار دارد. < / p >
  < / div >
  < footer >
    < p > این یک فوتر چسبان است. < / p >
  < / footer >
< / body >
< / html >

< ! DOCTYPE html >
< html lang="fa" >
< head >
  < meta charset="UTF-8" >
  < meta name="viewport" content="width=device-width, initial-scale=1.0" >
  < title > فوتر چسبان با Grid < / title >
  < style >
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* تنظیم کانتینر اصلی به عنوان Grid */
    body {
        display: grid;
        grid-template-rows: auto 1fr auto;
        min-height: 100vh;
        font-family: Arial, sans-serif;
    }

    /* استایل‌دهی به محتوای اصلی */
    .content {
        padding: 20px;
        background-color: #f9f9f9;
    }

    /* استایل‌دهی به فوتر */
    footer {
        background-color: #333;
        color: white;
        text-align: center;
        padding: 10px;
    }
  < / style >
< / head >
< body >
  < div class="content" >
    < h1 > محتوای اصلی < / h1 >
    < p > اینجا محتوای اصلی صفحه قرار دارد. < / p >
  < / div >
  < footer >
    < p > این یک فوتر چسبان است. < / p >
  < / footer >
< / body >
< / html >

< ! DOCTYPE html >
< html lang="fa" >
< head >
  < meta charset="UTF-8" >
  < meta name="viewport" content="width=device-width, initial-scale=1.0" >
  < title > فوتر چسبان با موقعیت Fixed < / title >
  < style >
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* تنظیم محتوای اصلی */
    .content {
        padding: 20px;
        background-color: #f9f9f9;
        margin-bottom: 50px; /* فضای پایین برای فوتر */
    }

    /* استایل‌دهی به فوتر */
    footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #333;
        color: white;
        text-align: center;
        padding: 10px;
    }
  < / style >
< / head >
< body >
  < div class="content" >
    < h1 > محتوای اصلی < / h1 >
    < p > اینجا محتوای اصلی صفحه قرار دارد. < / p >
  < / div >
  < footer >
    < p > این یک فوتر ثابت در پایین صفحه است. < / p >
  < / footer >
< / body >
< / html >

< ! DOCTYPE html >
< html lang="fa" >
< head >
  < meta charset="UTF-8" >
  < meta name="viewport" content="width=device-width, initial-scale=1.0" >
  < title > فوتر چسبان با جاوا اسکریپت < / title >
  < style >
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* تنظیم محتوای اصلی */
    .content {
        padding: 20px;
        background-color: #f9f9f9;
    }

    /* استایل‌دهی به فوتر */
    footer {
        background-color: #333;
        color: white;
        text-align: center;
        padding: 10px;
    }
  < / style >
< / head >
< body >
  < div class="content" >
    < h1 > محتوای اصلی < / h1 >
    < p > اینجا محتوای اصلی صفحه قرار دارد. < / p >
  < / div >
  < footer >
    < p > این یک فوتر چسبان با جاوا اسکریپت است. < / p >
  < / footer >

  < script >
    function stickFooter() {
        const footer = document.querySelector("footer");
        const contentHeight = document.body.offsetHeight;
        const windowHeight = window.innerHeight;

        if (contentHeight < windowHeight) {
            footer.style.position = "fixed";
            footer.style.bottom = "0";
            footer.style.width = "100%";
        } else {
            footer.style.position = "relative";
        }
    }

    window.onload = stickFooter;
    window.onresize = stickFooter;
  < / script >
< / body >
< / html >