Sorun şu en altta olmasını istediğini footer her zaman orada olmayabilir. İçerik çok az olduğu zaman görüntülenen html sayfanın en altından yukarılara çıkar ve bu saçma bir görüntü oluşturur. Projenin arayüz hazırlama kısmında sıkça rastlanan bir sorun olsa da aslında çözümü basittir. Üç div ve bunları taşıyan bir div ile örnek verelim.
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
Bu 4 div in stilleri bu şekilde olursa footer istediğimiz gibi sürekli altta olur :
html, body { margin:0; padding:0; height:100%; }
#container { min-height:100%; position:relative; }#header { background:#ff0; padding:10px; }#body { padding:10px; padding-bottom:60px; /* Height of the footer */ }#footer {position:absolute;bottom:0;width:100%;height:60px; /* Height of the footer */background:#6cf;}
internet explorer 6 ve 5.5 için de bunun yazılması gerekir.
#container {height:100%;}