Footer Alanını Zeminde Tutmak

Web sitesi geliştiren çoğu kişinin karşılaşmış olduğu bir sorundan bahsedeceğim. Özellikle master page sayfalarımızı tasarladıktan sonra üzerine yazmış olduğumuz sayfaların içeriğinin kısa olması halinde istenilmeyen footer görüntüsüyle karşılaşılabiliyor. Tabi footer'ı zeminde tutmayı başaramadıysanız... 
Bu şekilde bir sorunla karşılaşıldığında nasıl çözeceğimize dair güzel bir çözüm yöntemi bulunmuş. Öyle ki bu çözüm yöntemi her tarayıcıda çalışabilecek şekilde. Faydalandığım kaynak için buraya tıklayabilirsiniz.

Sorunumuz ve çözümü için örnek bir görüntü:

Web şablonumuzu bu hale getirmemiz için yazmamız gereken kodları aşağıda paylaşıyorum.

HTML:

<div id="container">
<div id="header">
</div>
<div id="ortaAlan">
</div>
<div id="footer">
</div>
</div>

CSS:

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#ortaAlan{
   padding:10px;
   padding-bottom:120px;   /* footer yüksekliği */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:120px;   /* footer yüksekliği */
   background:#6cf;
}

Html ve Css kodlarındanda anlaşılacağı gibi, footer alanının yüksekliği kadar orta alan uzaklaştırılmıştır. Böylece footer alanının daima zeminde kalması sağlanmış oluyor.