Css ile Tam Ekran Iframe Kullanımı , webacemi.com

Css ile Tam Ekran Iframe Kullanımı
Etiketler: tam ekran iframe, full screen iframe,

Iframe kullanımı günümüz teknolojilerinde pek sıklıkla rastalanan bir kavram değil fakat bazen yaptığınız bir projede iframeler ile çalışma ihtiyacı duyabilirsiniz. Hatta iframe`i tam ekran kullanmak isteyebilirsiniz. Bu gibi durumlarda genelde height : 100%; işe yarar fakat iframe kullanımında işin içine bir kaç satır daha kod eklememiz gerekiyor.

Iframe kullanırken kod içerisinde kendi genişlik ve yüksekliğini verebilirsiniz fakat bütün tarayıcılar bu durumu desteklemeyecektir. Ve sonuç olarak iframe oluşturmak istediğiniz sayfada küçük bir banner olarak görünecektir. Peki o zaman nedir bu sihirli Css kodları hemen göz atalım.

Kod Bloğu:

html, body {

 margin: 0; padding: 0; position : absolute; height: 100%; max-height: 100%; width: 100%;

}

iframe {

position: absolute; height: 100%; width: 100%;

}

#kutu {

position: absolute; top: 0; bottom: 0; width: 100%; overflow: hidden;

}

Yukarıdaki kodlarımızda dikkat etmemiz gereken özellik position : absolute özelliğidir. Bu özellik sayesinde iframe ve oluşturduğumuz divlerin konumlanma özelliklerini 0 olarak atıyoruz. position : absolute; kodunun default değeri üst ve soldan 0 olarak kabul edilir. Bu yüzden ek olarak konumlama belirtmemize gerek yok. Fakat hizalamanın alttanda aynı şekilde 0 olmasını istiyorsak #kutu id seçicimizin içerisinde position`un bottom değerini 0 olarak belirtmek zorundayız.

Son olarak da #kutu id seçicisi içerisindeki overflow : hidden; özelliğini inceleyelim. Bu kod sayesinde iframe içerisinde belirtilen nesnenin ekranda tam olarak görüntülenmesi sağlanır. Css kodumuzdan bu kısmı silersek tarayıcımızın ekranında da kaydırma çubuğu çıkar ve iframe görüntüsünden istediğimiz sonucu alamayız.

Yukarıdaki kodlarımızın sayfa içerisindeki kullanımı da şu şekildedir.

Kod Bloğu:

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

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

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Tam Ekran CSS Kullanımı</title>

<style type="text/css" media="screen">

html, body {

margin: 0; padding: 0; position: absolute; height: 100%; max-height: 100%; width: 100%;

}

iframe {

position: absolute; height: 100%; width: 100%;

}

#kutu {

position: absolute; top: 0; bottom: 0; width: 100%; overflow: hidden;

}

</style>

</head>

<body>

<div id="kutu">

 <iframe src="hedef dosya" scrolling="yes"></iframe>

</div>

</body>

</html>

Makalemizde geçen konumlanma özelliklerini ilerleyen makalelerimizde daha detaylı olarak ele alacağım. Hepinize bol yazılımlı günler !