J'ai l'exemple de code ci-dessous. Cela fonctionne bien avec tous les navigateurs, à l'exception des navigateurs sur les appareils mobiles.
La balise de débordement est le problème.
Fonctionne avec tout sauf pour le mobile:
margin: 0; padding: 0; height: 100%; overflow: hidden;
Fonctionne avec tous les mobiles et non les ordinateurs:
margin: 0; padding: 0; height: 100%;
Quel est le meilleur moyen de le faire fonctionner à la fois?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Layout</title>
<style type="text/css">
body, html
{
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
</style>
</head>
<body>
<iframe width="100%" height="100%" src="http://www.cnn.com" />
</body>
</html>
Voici le code de travail. Fonctionne dans les navigateurs de bureau et mobiles. J'espère que ça aide. merci pour tout le monde répondant.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Layout</title>
<style type="text/css">
body, html
{
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
#content
{
position:absolute; left: 0; right: 0; bottom: 0; top: 0px;
}
</style>
</head>
<body>
<div id="content">
<iframe width="100%" height="100%" frameborder="0" src="http://cnn.com" />
</div>
</body>
</html>
Ceci est multi-navigateur et entièrement réactif:
<iframe
src="https://drive.google.com/file/d/0BxrMaW3xINrsR3h2cWx0OUlwRms/preview"
style="
position: fixed;
top: 0px;
bottom: 0px;
right: 0px;
width: 100%;
border: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index: 999999;
height: 100%;
">
</iframe>
C'est ce que j'ai utilisé dans le passé.
html, body {
height: 100%;
overflow: auto;
}
Également dans la iframe
ajouter le style suivant
border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%
Mettez ceci dans votre CSS.
iframe {
width: 100%;
height: 100vh;
}