Ayberk Atasay

ASP, CSS, Internet konuları üzerine paylaşımlar

CSS Div 100% Height

Eski tarayıcılar-yeni tarayıcılar.. Web tasarımı ile uğraşan bizlerin en büyük belası. Bir tasarım yaparsınız görüntüsü hepsinde farklı görülebilir. İşte bunlardan biride height elemanı.

Height elemanı eski bir tarayıcı olan IE6 ve alt sürümlerinde %100 yaptığınızda normal görünür. ve sayfaya kendini yayar. Fakat yein nesil tarayıcılar bu özelliği desteklemiyor. Ve sizde bu durum konusunda çileden çıkabiliyorsunuz.

Benim yeni standartlara ve tarayıcılara ilk başladığım dönemlerdeki en büyük sorunlarımdan biri buydu. Div elemanı boyunu tüm sayfaya yayamamak.

Fakat bununda bir çözümü var bir iki yöntemi bir arada kullanarak. İşte bunun için örnek dosyalarımız aşağıda;

index.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" lang="TR" xml:lang="TR">

  <head> 

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 

    <title>CSS Div 100% Height</title> 

    <link rel="stylesheet" type="text/css" href="style.css" /> 

  </head>

  <body> 

    <div id="Icerik"> 

			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

		</div> 

  </body> 

</html>

style.css

html {

	height: 100%;

}

body {

	margin: 0;

	padding: 0;

	height: 100%;

}

#Icerik {

	background: #EEE;

	border-left: 1px solid #000;

	border-right: 1px solid #000;

	padding: 0 20px 0 20px;

	margin: auto;

	font: 1.5em arial, verdana, sans-serif;

	width: 960px;

	height: 100%;

}

Örnek dosyayı görmek için tıklayınız.

CSSAyberk Atasay30 Ocak 2009, CumaEkle Bunu

Önceki Kayıt

Sonraki Kayıt

Yorumlar

metin
14 Şubat 2010, Pazar

bu kodlarda hata var yanlız. ben sadece firefox'ta denedim sadece ama eğer içeriğiniz çok ise ve browserınızın yüksekliğini 700px yaparsanız, scroll ile aşağıya indiğinizde arkaplandaki uzattığınız backgroundun aşağıya doğru inmediğini göreceksiniz. bunu bu sayfadaki demoda da görebilirsiniz. Sadece uyarayım dedim. kolay gelsin

tayfun hakyemez
14 Kasım 2009, Cumartesi

çok güzel bir çalışmaaa o kodlarr keşke belli olsa tarayıcı farklılıklarından nefret ediyorum ff de farklı ie de farklı :(

eray
29 Eylül 2009, Salı

kardeşim süpersin. bir saattir yabancı sitelerde geziyordum. ama sende buldum cevabı. sayfayı % olarak 3 e bölmeye uğraşyordum %20 %20 %60 gibi bu kodları benzeterek hallettim. on numarasın.

mustafa
6 Eylül 2009, Pazar

Ayberk kardeşim bilgi ve paylaşım için çok teşkkür ederim.

Ayberk Atasay
9 Şubat 2009, Pazartesi

@mcakir
Aslını söylemek gerekirse kodlar birçok tarayıcıda düzgün çalışmaktadır. Fakat ie6 ve alt versiyonlarında bu kodlar hatalı çalışıyor. Fakat css hack diye aratırsan bu sorunların çözümü ile ilgili bir çok çözüm bulabilirsin.

mcakir
7 Şubat 2009, Cumartesi

Şuan tam olarak hangi kodlar hangi tarayıcılarda sorun çıkarıyor-çıkarmıyor belli mi acaba...