Iframe plein écran avec une hauteur de 100%.

Question

Iframe plein écran avec une hauteur de 100%.

Demandé el 3 de Mai, 2011: Quand la question a-t-elle été
177933 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Les iframe height=100% sont-ils supportés par tous les navigateurs ?

J'utilise le 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 que cela prendra la hauteur de la page restante (car il y a un autre cadre en haut avec une hauteur fixe de 50px). Ce système est-il compatible avec les principaux navigateurs (IE/Firefox/Safari) ?

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

Demandé el 3 de Mai, 2011 par testndtv

Answer 1

5 Réponses

Answer 2

344voto

Akshit Soota Points 1235

Vous pouvez utiliser frameset comme indiqué dans la réponse précédente, mais si vous insistez pour utiliser des iFrames, les deux 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 alternatives 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 deuxième 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 cacher les barres de défilement de l'iFrame, le parent est rendu overflow: hidden pour masquer les barres de défilement et l'iFrame peut atteindre 150% en largeur et en hauteur, ce qui force les barres de défilement à sortir de la page. Comme le corps de la page n'a pas de barres de défilement, on ne s'attend pas à ce que l'iframe dépasse les limites de la page. Cela permet de cacher les barres de défilement de l'iFrame en pleine largeur !

Répondu el 3 de Mai, 2011 par Akshit Soota (1235 Points )

Answer 3

47voto

Rudie Points 8975

1. Changez votre DOCTYPE en quelque chose de moins strict. N'utilisez pas XHTML, c'est stupide. Utilisez simplement le doctype HTML 5 et c'est bon :

<!doctype html>

2. Vous devrez peut-être vous assurer (cela dépend du navigateur) que le parent de l'iframe a une hauteur. Et son parent. Et son parent. Etc :

html, body { height: 100%; }

Répondu el 3 de Mai, 2011 par Rudie (8975 Points )

Answer 4

35voto

Ivan Points 642

Cela a très bien fonctionné pour moi (uniquement si le contenu de l'iframe provient de la page d'accueil). 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>

Répondu el 7 de Septembre, 2012 par Ivan (642 Points )

Answer 5

2voto

Brabbeldas Points 273

En complément de la réponse d'Akshit Soota : il est important de définir explicitement la hauteur de chaque élément parent, ainsi que celle du tableau et de la table. colonne le cas échéant :

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

Répondu el 12 de Février, 2013 par Brabbeldas (273 Points )

Answer 6

1voto

BraveNewMath Points 1306

Voici un code concis. Il s'appuie sur une méthode jquery pour trouver la hauteur actuelle de la fenêtre. Au chargement de l'iFrame, il définit la hauteur de l'iframe comme étant la même que celle de la fenêtre actuelle. Ensuite, pour gérer le redimensionnement de la page, la balise body possède un gestionnaire d'événement onresize qui définit la hauteur de la iframe chaque fois que le document est redimensionné.

<html>
<head>
    <title>my I frame is as tall as your page</title>
     <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body onresize="$('#iframe1').attr('height', $(window).height());" style="margin:0;" >
    <iframe id="iframe1" src="yourpage.html" style="width:100%;"  onload="this.height=$(window).height();"></iframe>
</body>
</html>

Voici un échantillon fonctionnel : http://jsbin.com/soqeq/1/

Répondu el 30 de Octobre, 2014 par BraveNewMath (1306 Points )

Iframe plein écran avec une hauteur de 100%.

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Iframe plein écran avec une hauteur de 100%.

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: