iFrame ne s'étend pas à 100% de hauteur

Je présente ci-dessous le code html. Et je voudrais l'iFrame pour couvrir le reste de l'écran à 100% sur tout ce gauche. J'ai essayé le "100%" et "*" dans l'attribut hauteur, mais ne fonctionne pas. Pourquoi est-ce? Grâce

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    </head>
    <body>
        <div id="container-frame">
            <img id="if-logo" height="35" width="84" alt="Kucku" src="/Content/Images/logo.gif"/>
            <img id="if-avatar" height="30" width="30" alt="Avatar" src="http://web.kucku.vn/Content/Images/Avatars/default_profile_bigger.png"/>
            <a id="if-username" href="/nvthoai">nvthoai</a>
            <div id="if-box">
            </div>
            <a id="if-close" href="http://www.yahoo.com" target="_top"> </a>
            <div id="if-link">
            </div>
            <div id="if-star">
            </div>
        </div>
        <iframe id="mainFrame" frameborder="no" width="100%" title="mainFrame" framespacing="0" border="0" name="mainFrame" src="http://www.yahoo.com" style="display: block; width: 100%; float: left; height: 100%;">
            <html xmlns="http://www.w3.org/1999/xhtml">
            </html>
        </iframe>
    </body>
</html>



#container-frame {
background:#E1E1E1 url(../images/if_bg.gif) repeat-x scroll 0 0;
height:35px;
width:100%;
}

source d'informationauteur HP.

  1. 17

    La raison height: 100% ne travaille pas parce qu' % hauteurs ne fonctionnent pas sur les enfants dont les parents n'ont pas explicite (non %) de hauteur. Donc cela ne fonctionne pas:

    parent {
  height: 60%;
}

child {
  height: 100%;
}

    alors que ce n':

    parent {
  height: 60em;
}

child {
  height: 100%;
}

    Enfant ne sait pas ce que 60% signifie que, si au lieu de cela, il devient height: auto (hauteur déterminée par le contenu statique à l'intérieur).

    Enfant ne savons comment comprendre un % de la 60em, ou de toute autre explicite de l'unité.

    Il y a quelques exceptions à cette règle. On est où, quand à la fois le html et les éléments du corps sont donnés hauteur: 100%, vous pouvez utiliser la hauteur: 100% ou min-height: 100% sur un enfant direct. (Vous pouvez essayer hauteur: 96% Pat l'a suggéré, mais sais que ce sera complètement différent des valeurs par écran/navigateur hauteur. À l'inattendu tailles que vous pourriez perdre le contenu.)

    Sauf si je suis mal interpréter le HTML, il semble que vous avez deux enfants: l'iframe et #container-cadre.

    Vous pouvez essayer absolument de positionnement #container-cadre en haut de la fenêtre d'affichage (de sorte qu'il peut s'asseoir dessus le reste de la page, et par "au-dessus", je veux dire "plus près de l'utilisateur sur l'axe des z"), et si l'iframe n'est pas réglé à 100% de haut, mais peut-être comme Pat exemple, 96% ou quelque chose, vous pourriez peut-être donner l'iframe certains haut de rembourrage pour faire des visuels salle de #container-cadre. Si vous ne le faites pas, le haut de l'iframe serait obscurci par #container-cadre et les gens de manquer le haut. Sachez que vous ne pouvez pas ajouter en haut ou en bas des marges, le rembourrage, les frontières, etc à 100% haut de la boîte. Qui vous donnerait quelque chose de plus de 100%!

    Une autre exception à la % de la hauteur de la règle est avec des éléments en position absolue en général. Ils peuvent avoir un % de la hauteur de ainsi, sauf IE6 a des problèmes avec cela. Peut-être absolument positionnement à la fois directe les enfants peuvent travailler, si vous n'avez pas l'esprit de piratage pour IE6 ou ne se soucient pas de IE6. En général, je n'aime pas le positionnement du tout sur une page, mais qui pourrait être plus facile dans un cas comme celui-ci.

  2. 1

    Cette CSS devrait faire l'affaire pour vous:

    body {
  margin: 0;
  padding: 0;
  overflow-y: hidden;
}

    Puis réglez la hauteur de l'iframe à 96%. Cela empêchera d'être poussé hors de la partie inférieure de la page.

    La raison, vous avez besoin c'est parce que 100% de la hauteur sur l'iframe est calculé comme 100% de la hauteur de l'écran. Puisque vous avez un 35px de haut div au-dessus de l'iframe, vous vous retrouvez avec un iframe poussé 35px au-delà de la hauteur totale de l'écran.

  3. -1

    Vous pouvez essayer en utilisant simplement <object> au lieu de <iframe>

    Exemple:

    <object type='text/html' data="http://www.wikipedia.org/" style='width:100%; height:100%'>

    Remarque que la plupart des gens vous déconseillons l'utilisation de tout type de cadrage (à l'aide de l'objet ou de l'iframe), pour des raisons de sécurité.

    mise à Jour

    J'ai oublié! Il peut aussi être un moyen de régler l'iFrame de façon dynamique à l'aide d'une fonction javascript qui s'exécute après que le corps de la charge. Il est un très bon exemple de cela ici.