Pleine page <iframe>

Question

Pleine page <iframe>

Demandé el 17 de Juillet, 2013: Quand la question a-t-elle été
179299 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai l'exemple de code ci-dessous. Cela fonctionne bien avec tous les navigateurs, à l'exception des navigateurs des appareils mobiles.

La balise de débordement est le problème.

Fonctionne avec tous les appareils sauf 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 sur les deux ?

<!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>

Demandé el 17 de Juillet, 2013 par Lacer

Answer 1

5 Réponses

Answer 2

221voto

Lacer Points 4380

Voici le code qui fonctionne. Il fonctionne dans les navigateurs de bureau et mobiles. J'espère que cela vous aidera. Merci à tous ceux qui ont répondu.

<!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"></iframe>
        </div>
    </body>
</html>

Répondu el 18 de Juillet, 2013 par Lacer (4380 Points )

Answer 3

55voto

tawsif torabi Points 118

Ce site est compatible avec tous les navigateurs 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>

Répondu el 13 de Avril, 2017 par tawsif torabi (118 Points )

Answer 4

11voto

shoriwa-shaun-benjamin Points 337

Mettez ceci dans votre CSS.

iframe {
  width: 100%;
  height: 100vh;
}

Répondu el 8 de Mars, 2018 par shoriwa-shaun-benjamin (337 Points )

Answer 5

4voto

Jay Patel Points 491

C'est ce que j'ai utilisé dans le passé.

html, body {
  height: 100%;
  overflow: auto;
}

Également dans le iframe ajoutez le style suivant

border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%

Répondu el 17 de Juillet, 2013 par Jay Patel (491 Points )

Answer 6

4voto

j.j. Points 1241

Pour les redirections de cadres en plein écran et autres choses similaires, j'ai deux méthodes. Les deux fonctionnent bien sur les mobiles et les ordinateurs de bureau.

Notez qu'il s'agit de fichiers HTML complets, valides et compatibles avec tous les navigateurs. Il suffit de changer title y src pour vos besoins.

1. cette est mon préféré :

<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-1 </title>
<meta name=viewport content="width=device-width">
<style>
 html, body, iframe { height:100%; width:100%; margin:0; border:0; display:block }
</style>
<iframe src=src1></iframe>

<!-- More verbose CSS for better understanding:
  html   { height:100% }
  body   { height:100%; margin:0 }
  iframe { height:100%; width:100%; border:0; display:block }
-->

ou 2. quelque chose comme ça légèrement plus courte :

<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-2 </title>
<meta name=viewport content="width=device-width">
<iframe src=src2 style="position:absolute; top:0; left:0; width:100%; height:100%; border:0">
</iframe>

Note :
Les exemples ci-dessus évitent d'utiliser height:100vh parce que les anciens navigateurs ne le savent pas (peut-être discutable de nos jours) et que height:100vh n'est pas toujours égal à height:100% sur les navigateurs mobiles (probablement non applicable ici). Autrement, vh simplifie un peu les choses, donc

3. Voici un exemple d'utilisation de vh (pas mon préféré, moins compatible avec peu d'avantages)

<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-3 </title>
<meta name=viewport content="width=device-width">
<style>
 body { margin:0 }
 iframe { display:block; width:100%; height:100vh; border:0 }
</style>
<iframe src=src3></iframe>

Répondu el 10 de Février, 2020 par j.j. (1241 Points )

Pleine page <iframe>

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Pleine page <iframe>

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: