Iframe/CSS: Forcer Iframe à adapter à l'écran

Je suis en train d'essayer d'avoir un iframe s'adapter à la taille de mon écran, et de tout autre utilisateur de l'utiliser à différentes résolutions, à l'exception de peu importe ce que j'essaie, je vais soit à la fin avec l'iframe est trop petite ou la hauteur trop grande provoque une double barre de défilement. (L'iframe et la page elle-même avoir des barres de défilement).

Mon objectif est d'avoir de l'iframe ajustement de 85% de la largeur de la page (qui fonctionne!), 100px de haut de l'écran (marche aussi), et puis pour le bas pour ajuster le bord du bas de mon navigateur (c'est là que je suis bloqué...)

HTML

<div id="maindiv" class="maindiv">
<iframe id="theiframe" class="iframeautowidth" seamless src="http://whateverdomain.com></iframe>
</div>

CSS:

.maindiv {
width: 85%; 
top: 100px;
}

.iframeautowidth {
left: 0px;
top: 0px;
bottom: 0px;
width: 85%;
height: 100%;
border: 0
overflow: hidden;
display: block;
margin: 0;
float: left;
}

Si ça compte pour rien, j'ai la dernière jquery en cours d'exécution sur ma page si ça vous aidera. Merci à l'avance!

Quel est le point dans un géant de l'iframe?
La tabulation du système, de sorte que l'iframe va remplir toute la page, à l'exception de la 100px j'ai de moi-même sur le dessus.
Vous devez utiliser les liens ordinaires & pas d'iframe (débordement avais de la zone de la place), avec redondant XHR pour l'instant de chargement si vous le voulez vraiment.

OriginalL'auteur Dustin | 2011-04-19

  1. 3

    Utiliser le onload() événement de votre iframe et le onresize() cas de la fenêtre de redimensionnement de l'iframe à la taille requise.

    Cet article du Support Microsoft l'explique bien.

    Pour info, en javascript screen.width & screen.height vous donnera la résolution de l'écran.

    screen.width et screen.height est inutile ici que la taille de l'écran != taille disponible à votre page web.
    Il a donné de mon coup. Ajouté le javascript et les deux valeurs de mon DIV et Iframe (et la commutation entre eux autour pour s'assurer que je n'avais pas confondu moi-même), également essayé de supprimer mon CSS lignes pour le faire fonctionner, pas de chance. Avec mon CSS l'iframe va à 85% de la page, mais a la hauteur de peut-être 150px, alors que sans mon CSS c'est tout simplement une boîte. Vous ne savez pas où je suis allé mal.
    p.s. Utilisation innerHeight/clientHeight à la place.

    OriginalL'auteur Dan

  2. 0

    Si vous aviez Fx4, une simple height: -moz-calc(100%-100px) serait de travailler une merveille. Dommage que cette fonctionnalité est présentée et soutenue pour la fin en CSS3.

    J'ai fx4, malheureusement j'ai besoin de faire comme la croix-navigateur compatible que possible. >_< Merci bien!

    OriginalL'auteur billyswong

  3. 0

    Si le 100px de haut est pour les onglets de navigation de l'iframe, il y a peut être une solution de contournement. Il vous suffit de remplir votre iframe à 100% de la hauteur, puis mettre ces onglets à l'intérieur de la iframes comme un autre iframe avec une taille fixe. Ou tout simplement station de jeu de cadres.

    Si cela fonctionne pour vous ou pas dépend de votre conception exacte, mais l'espoir qui aide.

    OriginalL'auteur billyswong