web-dev-qa-db-fra.com

comment obtenir iframe pour remplir la page entière à 100% et en haut: 4px?

Je viens ici depuis un moment et n'ai posé qu'une seule question auparavant. Et j'ai conçu de nombreux sites. Mais la seule chose que je n'obtiens pas pleinement est "iFrames". Ils jouent un peu avec ma tête.

.: Ce que j'essaie de réaliser:.

note: Je n'ai pas la propriété de l'origine du domaine iFrames ... Cela ne devrait pas être pertinent puisque vous prenez simplement une page et la montrez sur une autre. Leur style externe montre toujours leur page comme il se doit. Je le sais parce que je l'ai fait.

1) J'ai besoin de savoir comment afficher l'iFrame sur mon site en FULL PAGE. Je sais qu'il y a BEAUCOUP de sujets ici sur les iFrames, mais 1) ils sont obsolètes. 2) ils ne s'appliquent pas à moi/mon site. J'ai tout essayé, et pourtant tout semble vain.

.:Exemple:.

Lorsque les utilisateurs accèdent à http://www.example.com/news.php , la page doit charger le contenu d'un autre site d'actualités. c'est-à-dire cnn, wn, cbs ...

J'ai déjà compris cela, alors s'il vous plaît, ne me dites pas tous les décombres de ne pas avoir la propriété du contenu, alors je ne pourrai pas atteindre mon objectif.

Je ne me souviens pas comment je l'ai écrit, mais je sais qu'il n'y avait AUCUN style CSS. C'était quelque chose de TRÈS similaire à:

    <body style="scrolling:no;>
    <iframe src='http://www.example.com' 
    style='position:absolute; top:4px; left:0px; width:100%; height:100%; 
    z-index:999' onload='sendParams();' frameborder='no' scrolling='auto'>
    </iframe>
    </body>

Ce que je n'obtiens pas, c'est: quel que soit le style que j'utilise pour personnaliser l'iFrame, il semble être contenu dans une boîte sur le size= 867x155. J'ai même essayé de mettre l'iFrame lui-même dans un DIV, et DIV réglé sur: W- 100% H- 100%.

lorsque j'ai essayé l'approche CSS, la marge/hauteur/largeur a été ignorée. En outre, un style de corps différent de margin="0", était futile; encore.

javascripthtmlcssiframe
17
The Antarctican

Jetez un oeil: http://jsfiddle.net/cgXcR/

Le HTML:

<iframe src="http://www.cnn.com" height="100%"></iframe>​

Le CSS:

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

iframe { width:100% ;
        height:100% ;
    border:none ;
}
18
Cynthia

D'accord, je voudrais remercier Cynthia pour son aide.

Mais si quelqu'un cherche une réponse simpliste qui fonctionne réellement, alors vérifiez ceci:

Comme l'enquête ORIGINALE: FULL iFrame

ne résolution utilisant CSS

<blah>
<head>
<style type="text/css">
    body {scrolling:no;
}
    iframe {position:absolute;
    z-index:1;
    top:0px;
    left:0px;
}
</style>
</head>
<body>
    <iframe src="http://www.wn.com" height="100%" width="100%" frameborder="0"></iframe>
</body>

Notez le positioning & z-index

* Remarque: Cela peut être écrit uniquement via le balisage. Vous n'avez pas à utiliser CSS, mais il est plus logique de le faire parce que non seulement vous essayez de tout afficher correctement sur le site Web yoru; en utilisant CSS pour personnaliser votre iFrame, vous ouvrez plus de fenêtres pour chaque cadre individuel de votre page Web. Si vous êtes comme moi, et que vous n'utilisez qu'UN iFrame, vous devez simplement utiliser MARK-UP. Mais, si vous en avez plus de 1 [ou 1 le cadre en contient plusieurs], vous devez utiliser CSS pour spécifiquement ID chaque cadre. *

De plus, si quelqu'un se demande comment utiliser uniquement MARK-UP, il suffit d'échanger ce qui est dans le CSS et de mettre dans le <iframe></iframe> mais utilisez des guillemets simples

The Antarctican

10
The Antarctican