Pleine page <iframe>

97

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 tous sauf pour mobile:

margin: 0; padding: 0; height: 100%; overflow: hidden;

Fonctionne avec tous les ordinateurs mobiles et non:

margin: 0; padding: 0; height: 100%;

Quelle est la meilleure façon de faire fonctionner 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>
html css iframe Lacer
la source
Pourquoi ne pas simplement rediriger vers cnn.com?
GolezTrol
cnn.com est plus un exemple. pour montrer le comportement que j'essaie d'empêcher.
Lacer du
il suffit d'ajouter <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> à la tête du html contenant et la réactivité est de retour (au moins partiellement).
Nukey

Réponses:

171

Voici le code de travail. Fonctionne dans les navigateurs de bureau et mobiles. J'espère que ça aide. merci pour tout le monde qui a 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" />
        </div>
    </body>
</html>
Lacer
la source
2
attention, quand je voulais mettre une iframe dessus - il y avait un problème dans Chrome. J'ai ajouté la fermeture </iframe> et les travaux
Michal - wereda-net
On dirait que cela enlève la réactivité (c'est-à-dire la réduction des colonnes, etc.) du contenu dans l'iframe. Mais d'une manière ou d'une autre uniquement lors de l'ouverture de la page avec Mobile Safari, pas lors du redimensionnement d'un navigateur de bureau. Des idées sur ce qui pourrait causer ce comportement?
psteinweber
3
@psteinweber, il vous suffit d'ajouter <meta content='width=device-width, initial-scale=1.0' name='viewport'>à la page contenant.
jfeust
A dû utiliser à la vwplace de %for widthet des height propriétés pour obtenir un alignement correct dans Chromium 81. Sinon, cela fonctionne comme un charme.
Josh Habdas
19

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>
tawsif torabi
la source
7

Mettez ceci dans votre CSS.

iframe {
  width: 100%;
  height: 100vh;
}
shoriwa-shaun-benjamin
la source
3

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

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

Aussi dans l' iframeajout du style suivant

border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%
Jay Patel
la source
merci pour la réponse mais c'est essentiellement ce que j'ai donc ça ne marche pas. Sur le navigateur mobile, il coupe tout ce qui déborde et ne vous permet pas de faire défiler.
Lacer
@Lacer Essayez de remplacer overflow: hiddenparoverflow: auto
Jay Patel
a essayé cela. sur le navigateur mobile, il le coupe toujours et sur les navigateurs de bureau, il provoque des doubles défilements
Lacer
non encore le double défilement dans le navigateur de bureau et se coupe sur les navigateurs mobiles
Lacer
2

Pour les redirections d'images en plein écran et des choses similaires, j'ai deux méthodes. Les deux fonctionnent bien sur mobile et ordinateur de bureau.

Notez qu'il s'agit de fichiers HTML valides et fonctionnant sur plusieurs navigateurs. Changez simplement titleet srcpour vos besoins.
Vous pouvez envisager de supprimer <meta charset>si vous n'avez pas de caractères non ASCII.

1. c'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%; border:0; display:block; width:100% } -->

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

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


Remarque :
pour être prudent, les exemples ci-dessus évitent d'utiliser height:100vhparce que les anciens navigateurs ne le savent pas (peut-être discutable de nos jours) et height:100vhn'est pas toujours égal à height:100%sur les navigateurs mobiles (probablement pas applicable ici). Sinon, vhsimplifie un peu les choses, donc

3. ceci est un exemple utilisant 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>
jj
la source