Tam ekran iframe

13.08.2011 28.207 5 Paylaş

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

#html #css #iframe #full-page #tam-ekran