Döküman tipi HTML 4.01 Transitional olarak tanımlanmış sayfalardaki 100% yükseklik probleminin çözümü

Bu yazımda sayfamızı döküman tipi HTML 4.01 Transitional olarak tanımlanan sayfamızın 100% oranında yüksekliği ayarlamak isterken karşılaştığımız hatanın nedenlerini ve nasıl çözüleceği hakkında bilgi vermeye çalışacağım.

İlk olarak standart bir web sayfasının hangi bölümlerden oluştuğu ile işe başlamak daha doğru olacak sanırım. Çok kısa şekilde anlatmak istersem bir web sayfası HEAD ve BODY olmak üzerine iki kısımdan oluşur. HEAD bölümü sayfamızın document type, title, meta tag, css ve javascipt tanımlarımızı yaptığımız tarayıcı ekranı içinde görünmeyen fakat hem arama motorları hemde web sayfanın browser içinde nasıl yorumlanacağını belirlediğimiz bölümdür. BODY kısmı ise tarayıcı ekranında görünen kısımların oluşturulduğu bölümdür. Eğer sayfamızı Dreamweaver, Visual Studio ve benzeri üçüncü parti yazılımlar kullanarak hazırlıyorsak HEAD bölümünün en üst kısmına Document Type tanımlasıda varsayılan değer olarak eklenir. Document Type tanımlaması sayfanın hangi standartlara göre tarayıcı içinde yorumlayacağını belirler ve farklı tanımlamalar varsayılan sayfayı farklı şekilde yorumlayarak tarayıcı içinde gösterebilir. IE 6 ve Firefox olmak üzerine iki tarayıcı içinde nasıl bir çözüme gidebileceğinizi kısaca anlatmaya çalışalım.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<a href="http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd</a>">

Sayfanızdaki tanımlamamızın yukarıdaki gibi olduğunu varsayıyorum. Varsayılan CSS belgemizin içine yada sayfa içindeki style tanımlaması altına

html, body {
min-height:100% // IE altında çalışmaz sadece Firefox ve Opera içinde geçerlidir
height:100%
}

Sayfamızı sarmayalan ve %100 uzamasını istediğimiz alana verilecek

#container {
height:100%;
}

bu tanımlamayı yaptığımızda sayfadaki değişikliği farkedeceksiniz ama halen eksik birşeylerin olduğunu ve halen sayfamızın istediğimiz gibi çalışmadığıda göreceksiniz. Burada çok ufak bir püf nokta daha var. Döküman tipi tanımlaması içinde yazılı olan “http://www.w3.org/TR/html4/loose.dtd” alanınıda silmememiz gerekiyor ve artık sayfamızı 100% yüksekliğinde problemsiz kullanabilir hale gelebiliyoruz. Bunun body elementi içinde font tanımlaması yapan kişiler için bir sakıncası var. Varsayılan font tanımlamalarınız bozulmuş olacak ve font özelliklerini değiştirmek istediğiniz bölümlerdeki tüm classların içine font tanımlamalarını tekrar yapmamız gerecektir.