19 Ocak 2017 Perşembe
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: 3, Onay bekleyen: 0.
  1. Ahmet

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

  2. fenerbahceli

    cok saol usta çok işime yaradu

  3. xxx

    teşekkürler.