Tam ekran iframe

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