JS - iframe hauteur de 100% et pas de défilement (Scroll-y dans le corps)

J'ai une iframe problème. tout d'abord je recherche le mot clé iframe height dans https://stackoverflow.com/search?tab=relevance&q=iframe%20height mais je n'ai pas trouvé quelqu'un dont j'ai besoin.

Comment faire un iframe wicth hauteur de 100% et pas de défilement. Faites défiler jusqu'-y dans le corps. 

<body style="scroll-x:hidden;scroll-y:auto;">
<iframe frameborder="0" id="iframe" scrolling="no" src="http://www.google.com" style="width:960px;height:100%" height="100%" width="960"></iframe>

Et si je recherche quelque chose via http://www.google.com dans l'iframe, après tourner à la google page de résultat de recherche. l'iframe calculera la nouvelle hauteur et toujours avec iframe hauteur de 100%, la barre de défilement dans la partie du corps. (Je voudrais un peu d'aide peut travailler parfait, non seulement dans ie et firefox, mais aussi dans safari et chrome ). Merci beaucoup.

  • Je suis un peu confus. Vous voulez faire une iframe s'étendent sur la totalité du contenu de la fenêtre, et encore être de défilement? Est-il une raison vous ne pouvez pas afficher le contenu du document dans la fenêtre elle-même? Ou êtes-vous en omettant certaines pièce essentielle de l'information ici?
  • Vous souhaitez que la barre de défilement pour être à l'extérieur sur le document, mais vous voulez qu'il contrôle l'iframe?
InformationsquelleAutor cj333 | 2011-05-10
  1. 5

    Cela devrait faire ce que vous êtes à la recherche pour:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Page Title</title>

    <style type="text/css" media="screen">

        body,
        html {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        * {
            padding: 0;
            margin: 0;
        }

        iframe {
            width: 960px;
            height: 100%;
            overflow: hidden;
            border: none;
        }
    </style>

</head>
<body>

    <iframe src="http://google.com" scrolling="no"></iframe>

</body>
</html>

    Les clés ici sont les suivants:

    • Rendre le CORPS et les éléments HTML à 100% de la fenêtre du navigateur, donc quand vous faites de l'iFrame à 100%, il a quelque chose à 100% de l'.
    • Définir le CORPS et les éléments HTML overflow:hidden, de sorte que pas de barres de défilement sont présentés
    • Assurez-vous il n'y a pas de rembourrage

    Espère que ça aide

    • donc... le corps n'a pas de scroll-y. Si je recherche quelque chose dans l'iframe, je ne vois que le haut de quelques lignes, comment puis-je voir le reste?
    • Désolé, si vous avez besoin d'être capable de faire défiler le corps à la verticale, il suffit de retirer le overflow: hidden dans la feuille de style règles pour le corps, html.
    • J'ai essayé, pas de travail, le iframe height = browser height, de sorte que le rouleau-y n'est pas utile 🙁 je pense que c'est plus de travail pour les css...
    InformationsquelleAutor Jesse Bunch
  2. 2

    Utiliser mon Plugin JQuery :

     $.fn.resizeiframe=function(){
    $(this).load(function() {
        $(this).height( $(this).contents().find("body").height() );
    });
    $(this).click(function() {
        $(this).height( $(this).contents().find("body").height() );
    });

}

    puis , l'utiliser comme suit : 

    $('iframe').resizeiframe();

    N'oubliez pas de régler les attributs de iframe comme suit : 

    <iframe
   src="islem.html"
   frameborder="0"
   width="100%"
   marginheight="0"
   marginwidth="0"
   scrolling="no"
></iframe>
    • l'iframe est un autre attribut sauvé la journée ..
    • Ce sera probablement créer un cross-origin bloc si vous demandez quelque chose en dehors de votre domaine.
    InformationsquelleAutor Abdennour TOUMI
  3. 1

    J'étais à la recherche pour le même effet et je l'ai trouvé un moyen. Si vous regardez avec "examiner l'élément" dans Chrome (ou firebug) dans les paramètres de la section, puis sélectionnez le <html>. Vous devriez voir si le code html est plus petit que l'ensemble du document. Si vous définissez le code html à la hauteur: 300%, il devrait fonctionner. Voici les principales caractéristiques:

    html {height:300%;
}
body {height:100%;
}
#frame {height:90.74074074074074%;}

    ***regarder pour tout max-hauteur vous pourriez avoir codé, ce serait gâcher l'effet vers le haut.

    Dans mon cas, j'ai dû couper la hauteur du cadre avec un élément de plus dans mon conteneur, de sorte qu'il pourrait être pleinement strech sans les barres de défilement apparaissent. J'ai donc dû calculer le % de la hauteur restante dans mon récipient, à l'aide de firebug.

    ------- Une autre façon, plus facile:

    Essayez de ne pas spécifier la hauteur de vos documents html, 

    html, body {}

    alors seulement ce code:

    #some-div {height:100%;}
#iframe {height:300%;}

    remarque: la div doit être votre principal la section.

    Cela devrait relativement de travail. l'iframe est exactement calcultes 300% de la fenêtre visible de la hauteur. Si vous contenu html à partir de la 2e document (dans l'iframe) est plus petit en hauteur de 3 fois votre navigateur hauteur, il travail. Si vous n'avez pas besoin d'ajouter du contenu fréquemment pour que ce document est une solution permanente, et vous pourriez juste trouver votre propre % nécessaires selon votre contenu à la hauteur.

    • ok, il ne fonctionne que dans google Chrome, tout ce que je dit.
    InformationsquelleAutor pixelfe