Iframe plein écran d'une hauteur de 100%

Est iframe height=100% pris en charge dans tous les navigateurs?

j'utilise doctype comme: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

dans mon code iframe, si je dis: 

<iframe src="xyz.pdf" width="100%" height="100%" />

je veux dire Va-t-il réellement prendre la hauteur de la page restante (comme il ya un autre cadre sur le dessus avec une hauteur fixe de 50px) Cette option est-elle prise en charge par tous les principaux navigateurs (IE/Firefox/Safari) ?

aussi en ce qui concerne scrollbars, même si je dis scrolling="no" , Je peux voir des barres de défibrillation désactivées dans Firefox...Comment puis-je cacher complètement les barres de défilement et régler la hauteur iframe automatiquement?

196
demandé sur RokumDev 0000-00-00 00:00:00

9 réponses

vous pouvez utiliser frameset comme l'indique la réponse précédente mais si vous insistez sur l'utilisation d'iFrames, les 2 exemples suivants devraient fonctionner: 

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

une alternative: 

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

pour masquer le défilement avec 2 variantes comme indiqué ci-dessus: 

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

Hack avec le second exemple: 

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

Pour masquer les barres de défilement de l'iFrame, le parent est overflow: hidden cacher les barres de défilement et de l'iFrame est fait pour aller jusqu'à 150% de la largeur et de la hauteur ce qui oblige les barres de défilement en dehors de la page et puisque le corps n'a pas de barres de défilement que l'on ne peut attendre de l'iframe à dépasser les limites de la page. Cela cache les barres de défilement de l'iFrame avec la pleine largeur!

221
répondu Axe 2014-04-17 03:24:06

3 approches pour créer un fullscreen iframe :

  • approche 2-positionnement fixe

    cette approche est assez simple. Il suffit de régler le positionnement de l'élément fixed et Ajouter un height / width de 100% .

    Exemple Ici 

    iframe {
    position: fixed;
    background: #000;
    border: none;
    top: 0; right: 0;
    bottom: 0; left: 0;
    width: 100%;
    height: 100%;
}
    <iframe></iframe>

  • approche 3

    Pour cette dernière méthode, il suffit de régler le height de la body / html / iframe les éléments de 100% .

    Exemple Ici 

    html, body {
    height: 100%;
    margin: 0;         /* Reset default margin on the body element */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    width: 100%;
    height: 100%;
}
    <iframe></iframe>
142
répondu Josh Crozier 2015-01-09 04:28:57

1. Changez votre DOCTYPE pour quelque chose de moins strict. N'utilisez pas XHTML, c'est idiot. Il suffit D'utiliser le HTML 5 doctype et vous êtes bon: 

<!doctype html>

2. Vous pourriez avoir besoin pour s'assurer (dépend du navigateur) que l'iframe parent a une hauteur. Et son parent. Et son parent. Etc: 

html, body { height: 100%; }
40
répondu Rudie 2015-01-20 19:52:42

j'ai rencontré le même problème, je tirais une iframe dans une div. Essayez ceci: 

<iframe src="http://stackoverflow.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>

la hauteur est réglée à 100vh qui représente la hauteur de viewport. En outre, la largeur peut être réglée à 100vw, bien que vous allez probablement rencontrer des problèmes si le fichier source est responsive (votre cadre va devenir très large).

25
répondu NotJay 2015-08-07 13:27:05

cela a très bien fonctionné pour moi (seulement si le contenu iframe provient du même domaine ): 

<script type="text/javascript">
function calcHeight(iframeElement){
    var the_height=  iframeElement.contentWindow.document.body.scrollHeight;
    iframeElement.height=  the_height;
}
</script>
<iframe src="./page.html" onLoad="calcHeight(this);" frameborder="0" scrolling="no" id="the_iframe" width="100%" ></iframe>
25
répondu Ivan 2017-12-02 11:06:41

<iframe src="" style="top:0;left: 0;width:100%;height: 100%; position: absolute; border: none"></iframe>

6
répondu Heitor Giacomini 2017-02-27 20:22:09 

body {
    margin: 0;            /* Reset default margin */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    height: 100vh;        /* Viewport-relative units */
    width: 100vw;
}
<iframe></iframe>
3
répondu khoa 2016-12-15 10:21:29

S'ajoute à la réponse de Akshit Soota: il est important de définir explicitement la hauteur de chaque élément parent, aussi du tableau et colonne s'il y a lieu: 

<body style="margin: 0px; padding:0px; height: 100%; overflow:hidden; ">
<form id="form1" runat="server" style=" height: 100%">
<div style=" height: 100%">


    <table style="width: 100%; height: 100%" cellspacing="0"  cellpadding="0">
        <tr>
            <td valign="top" align="left" height="100%">
                <iframe style="overflow:hidden;height:100%;width:100%;margin: 0px; padding:0px;" 
                        width="100%" height="100%" frameborder="0" scrolling="no"
                        src="http://www.youraddress.com" ></iframe> 
            </td>
2
répondu Brabbeldas 2013-02-12 07:59:02

vous ajoutez d'abord css 

html,body{
height:100%;
}

ce sera le html: 

 <div style="position:relative;height:100%;max-width:500px;margin:auto">
    <iframe src="xyz.pdf" frameborder="0" width="100%" height="100%">
    <p>Your browser does not support iframes.</p>
    </iframe>
    </div>
2
répondu Tariq Javed 2016-04-25 18:00:05