عدم همخوانی ابعاد html , body!

با سلام.
مقدار خاصیت‌های margin و padding جفتشون رو برابر با صفر قرار بدین و خاصیت min-height اون رو برابر با ۱۰۰٪ قرار بدین.

سلام دوست من

ببینید این مساله ای که مطرح کردید از خاصیت های تگ های html و body هست.
اینکه فکر میکنید html و body  باید هم ارتفاع باشند اشتباه هست ؛ چون تگ html در بر گیرنده کل صفحه وب شما (صفحه  browser ) هست ولی body همیشه به اندازه ارتفاع محتوای سایت شما ، ارتفاع میگیره.
در این صورت وقتی ارتفاع مانیتور شما ، از ارتفاع محتوای صفحه وب شما بیشتر باشه ، html و body از نظر ارتفاع یکسان نمیشن.

الان اگر شما تعدادی <br> توی محتوای سایت قرار بدید ، میبینید که ارتفاع body زیاد شده و فوتر به انتهای بروزِر میچسبه.

یک روشی در CSS وجود داره به این شکل :

//HTML: 

<div id="wrapper">
    <header>HEADER</header>
    <section id="main">Here comes short content</section>
    <footer>FOOTER</footer>
</div>


//CSS:

html, body {
    height:100%;
}

#wrapper {
    position: relative;
    min-height:100%;
}

#main {
    padding-bottom: 44px;
}

footer {
    height: 44px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

این روش جواب میده ، اما احساس میکنم تحت شرایطی خاص ممکنه مشکل در این روش بوجود بیاد.

یک روش دیگه، استفاده از js برای ارتفاع دادن به تگ body هست ، به این شکل (در jQuery) :

$(function() {

    var docHeight = $(document).height();
    var footerHeight = $('footer').height();
    var bodyHeight = docHeight - footerHeight;
    
    $('body').height(bodyHeight);

});

این کد رو خودم نوشتم ، باید تستش کنید و اگر ایراد داشت تصحیح کنید.