deux de l'iframe dans une page, le 2ème iframe automatique de la hauteur

Je suis en train de réaliser auto redimensionnement de la 2ème iframe dans ce code,

Toute aide serait appréciée.

CSS

* {
    margin: 0;
    padding: 0
}
html, body {
    height: 100%;
    width: 100%;
    overflow: hidden
}
table {
    width: 100%;
    table-layout: static;
    border-collapse: collapse
}
iframe {
    width: 100%
}
.header {
    border-bottom: 1px solid #000
}
.content {
    height: 100%
}

HTML 

<table>
    <tr>
        <td class="header"><div><h1>Header</h1></div></td>
    </tr>
    <tr>
        <td class="content"><iframe name="iFrame1" height="85" src="Materials AU Stocked Header.htm" scrolling="no" frameborder="1"></td>
    </tr>
    <tr>
        <td class="content"><iframe name="iFrame2" height="100%" src="Materials AU Stocked.htm" scrolling="yes" frameborder="1"></td>
    </tr>
</table>
  • Si c'est possible merci de ne pas utiliser des Cadres!
  • Vous ne devriez pas utiliser la table pour faire de mise en page.
  • Je ne suis pas sûr si c'est possible, les deux fichiers sont générés de Business Objects et j'ai besoin de fusionner les deux d'entre eux pour afficher sur une seule page. ouvert localement à partir d'un fichier, pas de serveur web utilisé.
  • Qu'essayez-vous de le faire avec la hauteur ou votre iframes? Voulez-vous la deuxième iframe pour aller tout le chemin vers le bas de la page un pas de plus? Mais commencer en vertu de la première iframe? Vous voulez remplir le reste de la page?
  • Salut 3dgoo, à juste titre, que les sons excatly ce que je suis en train de réaliser.
InformationsquelleAutor Shane | 2012-11-29
  1. 1

    Vous pouvez faire cela en utilisant position: absolute avec votre deuxième iframe et en précisant top, bottom, left et right.

    Cela nécessite de votre #header et premier iframe ont une hauteur fixe.

    Note que j'ai mis dans des sites externes dans l'iframe src des fins de test. Remplacer ces de vos pages html.

    HTML

    <div id="header">
    <h1>Header</h1>
</div>
<iframe id="iFrame1" name="iFrame1" src="http://yahoo.com"></iframe>
<div id="iFrame2Container">
    <iframe id="iFrame2" name="iFrame2" src="http://yahoo.com"></iframe>
</div>

    CSS

    * {
    margin: 0;
    padding: 0
}
html, body {
    height: 100%;
    width: 100%;
    overflow: hidden
}
#header {
    border-bottom: 1px solid #000;
    height: 19px;
}

#iFrame1 {
    height: 80px;
    width: 100%;
    border: none;
    overflow: hidden;
}
#iFrame2Container {
    position: absolute;
    top: 100px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}
#iFrame2 {
    width: 100%;
    height: 100%;
    border: none;
}

    Démo

    Un supplément de quelques choses que j'ai remarqué dans votre code

    • Vous ne devriez pas utiliser des tableaux pour la mise en
    • Vous ne devez pas mettre des espaces dans les nom de fichier html
      • Renommer Materials AU Stocked Header.htm à quelque chose comme Materials-AU-Stocked Header.htm
    • Fermer les balises que vous ouvrez
      • <iframe> besoins </iframe> après il
    • grâce 3dgoo, a fonctionné parfaitement, exactement ce que je recherchais
    InformationsquelleAutor 3dgoo