25 Mart 2017 Cumartesi
Twitter

Tam ekran iframe

iframe i tam ekran olarak kullanmak isterseniz bu yazıyı tavsiye ederim.

Tam ekran iframe

Günün birinde tam ekran iframe kullanmanız gerekirse diye bu yazıyı yazmaya karar verdim.

ifram in tipik olarak width ve height özellikleri zaten var.

<iframe src="sayfa.html" frameborder="0" marginheight="0" marginwidth="0"
width="100%" height="100%"
scrolling="auto">Tarayıcınız desteklemiyor... </iframe>

Ancak bu özellikleri direkt olarak 100% olarak ayarlarsanız iframe in yüksekliğinin istediğiniz gibi ekranın tamamını kaplamadığını göreceksiniz.

Bu sorunu CSS kurnazlığı ile çözebiliyoruz.

Size tavsiyem aşağıdaki kodları kullanmanız:

<!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>Page with iFrame that FITS!</title> <style type="text/css" media="screen"> html, body { position: absolute; height: 100%; max-height: 100%; width: 100%; margin: 0; padding: 0; } iframe { position: absolute; height: 100%; width: 100%; border: none; } #container { position: absolute; top: 50px; /* Change with Height of #header */ bottom: 0; width: 100%; overflow: hidden ; } #header { position: absolute; top: 0px; height: 50px; /* Change with top of #container */ color: #eee; background-color: #ccc; width: 100%; } </style> </head> <body> <div id="header"></div> <div id="container"> <iframe src="http://www.istediginizadres.com"></iframe> </div> </body> </html>

Herkese iyi çalışmalar

Değerlendirme

Yazım dilinin sadeliği ve anlaşılabilirliği Puan: 0,50 (1 oy)
Yazıdaki kodların kalitesi Puan: 3,85 (1 oy)
İhtiyaca cevap verme Puan: 0,50 (1 oy)
Tavsiye edilebilirlik Puan: 0,95 (1 oy)
Genel değerlendirme Puan: 0,90 (1 oy)
Puanlamalar 5 üzerindendir.
  • Site Yorumları
  • Facebook Yorumları Facebook Yorumları
Yeni yorum yaz Toplam: 4, Onay bekleyen: 0.
  1. Kadiir Bilinmiyor

    Hocam Benim İstedğim Kod Bu Değil Nasıl Değil Mesela ben bir index html dosyası oluşturdum sonra anasayfa hakkimda iletisim adlı üç html dosyası yaptım peki bunları nasıl aynı siteye koyacam acill şuan lazım ??????????

  2. Ahmet

    Çok işime yaradı bende bunu arıyordum teşekkürler

  3. fenerbahceli

    cok saol usta çok işime yaradu

  4. xxx

    teşekkürler.