web-dev-qa-db-fra.com

Comment se débarrasser de la double barre de défilement lors de l'utilisation d'un iframe?

J'ai vu ce problème sur le Web, et toutes les solutions suggérées ne fonctionnent pas pour moi, alors j'ai pensé venir ici.

J'ai une page qui a un iframe. Le haut de la page est un menu déroulant, le reste de la page est l'iframe. Comme tout le monde le sait, l’idée est que le menu reste immobile et que la sélection de menu lance une application dans l’iframe. Le contenu de l'iframe devrait défiler, mais la page dans son ensemble ne devrait pas.

J'ai essayé de placer l'iframe width=height=100% dans un élément de table unique également avec width=height=100%, mais j'obtiens deux barres de défilement si la fenêtre est trop courte verticalement.

Aucune suggestion?

Je pense que je ne me suis pas bien expliqué. Je souhaite conserver la barre de défilement dans l'iframe en tant qu'auto, mais je ne souhaite jamais une barre de défilement pour l'ensemble de la page . le navigateur n'a pas besoin de faire une barre de défilement car l'iframe ne doit jamais dépasser du bas de la zone d'affichage.

htmlcssiframescrollbar
20
stu

MIS À JOUR:

DEMO:http://jsbin.com/ewomi3/3/edit

HTML

<table border=0 cellspacing=0 cellpadding=0 id="hold_my_iframe">
    <iframe src="http://www.w3schools.com/css/tryit.asp?filename=trycss_overflow" width=100% height=100% marginwidth=0 marginheight=0 frameborder=0></iframe>
</table>

CSS

* { margin:0 padding:0 }
body { margin:0; padding:0; text-align:center }  
#hold_my_iframe { padding:0px; margin:0 auto; width:100%; height:100% }

NOTE: J'ai enfin compris ce que vous voulez! Utilisez la balise table au lieu d'une balise div comme conteneur! Voir la démo et en profiter!

14
Luca Filosofi

définissez css overflow sur hidden, quel que soit le cadre dont vous souhaitez supprimer les barres de défilement ...

overflow:hidden
10
Gabe

Je sais que c'était un peu vieux, mais voici ce que j'ai fait pour ma page:

J'avais une page avec juste un iFrame, et je voulais qu'elle prenne toute la page, alors j'ai utilisé 

<iframe style="height:100%;width:100%" src="..."></iframe>

Après avoir ajouté la suppression de remplissage/marge/bordure appropriée, j'ai eu le problème de double barre de défilement que vous avez décrit. À l'aide de la fonctionnalité d'inspection de Chrome, j'ai découvert que le corps de la page avait une longueur d'environ 5 pixels par rapport à l'iframe. Je viens donc de modifier le code de l'iframe:

<iframe style="height:100%;width:100%;margin-bottom:-5px;" src="..."></iframe>

Ce margin-bottom:-5px; corrige le problème pour moi.

5
Liam Dawson

Pour ceux qui ont encore ce problème de double barre de défilement, il suffit d’envelopper l’iframe avec un élément overflow: hidden, puis d’ajouter une hauteur de 100% au code HTML, au corps, à l’iframe et à l’enveloppe.

http://jsfiddle.net/KZ5wz/ (Je ne sais pas pourquoi le résultat ne s'affiche pas correctement dans JsFiddle, mais cela fonctionne comme un charme dans ma machine)

3
Heri Hehe Setiawan
<style type="text/css">
body {margin:0; overflow: hidden;}
iframe {border: none;}
</style>
<body> 
<iframe height="100%" width="100%" src="yourframe1.html"></iframe>
<iframe src="yourframe2.html" width="100%" height="100%"></iframe>
</body>
3
Fabio R Cardoso

Les exigences sont claires:

  1. Il y a une barre de menus au-dessus de l'iframe, en raison de quoi l'iframe ne semble pas être en mesure de faire défiler l'écran jusqu'au bas de la page encadrée. 
  2. La barre de défilement de la fenêtre doit être masquée, mais pas la barre de défilement iframe.

Ma solution est très simple: 

  1. Masquer la barre de défilement de la fenêtre avec overflow:hidden;.
  2. Donnez à l'iframe la hauteur non pas 100% mais 100% moins la hauteur du menu et/ou l'en-tête se trouvant au-dessus de l'iframe. Je supposerai que le menu/en-tête occupe 20% de la hauteur totale, mais comme il aura généralement une hauteur fixe, on peut peut-être le calculer au mieux en CSS3 sous la forme height: calc ( 100% - 120px );. Le wrapper autour de l'iframe peut être une div ou une table avec une largeur de 100% et une hauteur de 100%.

Voici mon exemple avec la hauteur de l'iframe définie sur 80% (de la fenêtre):

coiffant:

body {
    overflow: hidden;
}
#hold_my_iframe {
    padding:0px; margin:0 auto; width: 100%; height: 100%; overflow:scroll;
}

html:

<table border="0" cellspacing="0" cellpadding="0" id="hold_my_iframe">
    <iframe src="http:/example.com/my-iframed-page.php"
            width="100%" height="80%"
            marginwidth="0" marginheight="0" frameborder="0"></iframe>
</table>
2
Ian Onvlee

Retirer corps {taille: 100%; }

1
Irshad Khan

Voyant que cette question est toujours sans réponse, je me suis dit que je mettrais mes dix sous. Je me demandais si vous aviez joué avec les paramètres display:block/display:inline. Si vous ne comprenez pas bien votre question, je ne sais pas exactement comment procéder, mais je pense que vous voudrez peut-être modifier votre iframe pour afficher inline.

0
Cosine

Eh bien, la question est ancienne, mais j'avais aujourd'hui le même problème et aucune des réponses n'a résolu mon problème. Pour les pages internes (même domaine) uniquement, deux barres de défilement verticales sont également apparues. Un pour naviguer sur la page chargée (correcte) et un autre pour ajuster un peu la hauteur de la zone iframe (!) ... Avec les pages sources externes, cela semble bien fonctionner.

La façon dont j'ai résolu ce problème était d'ajouter une classe au corps de la page interne à charger, comme ceci 

<body class="internalPage">

et mettre ce qui suit dans mon fichier CSS 

body.internalPage{height: 99.5%;}

J'espère que cela aidera quelqu'un à l'avenir.

0
ricardoc

J'ai résolu mon problème de double barre de défilement en attribuant dynamiquement la hauteur d'iframe.

StackOverflow - Changement dynamique de hauteur d'iframe

0
Jennifer Zhao