Réglage de l'iframe de prendre de l'espace restant dans la page
Il y a beaucoup de questions concernant l'iframe et c'est la hauteur. Certains sont similaires, mais ne me donne pas la bonne réponse. Donc, laissez-moi vous expliquer mon cas:
JSFiddle: http://jsfiddle.net/AmVhK/3/show/
Éditeur: http://jsfiddle.net/AmVhK/3/
Il y a une table avec 2 lignes. Première contient un div #barre d'outils avec fixe hauteur. La deuxième ligne contient un div qui est titulaire d'un iframe. J'ai besoin de l'iframe pour prendre l'espace disponible au-dessous de la barre d'outils de la div.
Problème, je suis confronté à est en IE mode standard (soutien à la IE8+). Disons, la hauteur de la fenêtre est 1000px et la hauteur de la barre d'outils de 200px, alors la hauteur de l'iframe est également 1000px et a donc des barres de défilement. J'ai besoin de l'iframe pour avoir la hauteur de la page en hauteur de la barre d'outils de la hauteur).
Il serait bon si il y a un CSS solution. L'utilisation de JavaScript pour obtenir la hauteur disponible et la valeur de l'iframe ou c'est de la div contenant est la solution de dernier recours pour moi 🙂
Réglage de la barre d'outils ou de l'iframe de position absolue aussi de ne pas travailler pour mon cas d'utilisation. Balisage changement est ok si nécessaire (si vous souhaitez supprimer des tables)
J'ai déjà le code CSS suivant:
html, body {height: 100%}
Toute bonne solution pour la mettre en œuvre.
iframe est toujours de prendre plus d'espace que ce qui est disponible.
Êtes-vous fixé dans la pierre sur l'utilisation de tables?
balisage changement est ok
hmmmm, allez oldschool et l'utilisation d'un jeu de cadres ? ( comme meingutscheincode.de/gutschein-anzeigen/... par exemple )
OriginalL'auteur sv_in | 2012-11-16
Vous devez vous connecter pour publier un commentaire.
OK, voici ma tentative à cet égard, il y a un problème avec l'iframe de vouloir avoir une barre de défilement horizontale dans IE7, mais la mise en page est bonne, j'ai dû abandonner parce que la lutte avec IE7 me donne envie de mâcher mes propres yeux, j'espère que quelqu'un pourrait augmenter d'ici.
serait-il également possible d'animer les
.iframe-container
propriété top avec la barre d'outils?par exemple, vous pouvez fournir un rappel à la barre d'outils d'animation qui définit l' .iframe-container { top: 200px; } à la taille calculée de la barre d'outils
La hauteur de la barre d'outils serait varient avec les différents boutons enfoncé coz différentes fonctionnalités nécessitent différentes majorations et les hauteurs de spectacle.
la barre d'outils nécessitant une hauteur flexible rend l'ensemble de la question considérablement plus difficile, vous devez mentionner que dans l'OP. Avec l'ensemble de la hauteur, c'est plutôt simple, sans tables et très propre code. Quand j'ai écrit l'OP commentaire, je n'étais pas au courant que vous souhaitez que la barre d'outils flexibles, c'est un gamechanger, devrez réécrire la solution.
OriginalL'auteur Dale
Voici une solution testé avec IE8 et FF17
EDIT : border: 0; line-height: 0; fixe à 100% dans FF, la largeur est parfait dans IE8 (n'ont pas IE9 et 7), la hauteur de la ligne pourrait être remis à zéro dans la barre d'outils du cours.
Vraiment étrange dans FireBug pour voir la hauteur parfaite et line-height: 0; fixe dans Firefox.. c'est à dire le besoin overflow-y: hidden; La Navigation est un art!
est-il possible de mettre en œuvre sans l'aide de la position absolue. La hauteur de la barre d'outils va changer avec l'animation sur l'interaction de l'utilisateur et il varie. L'iframe doit se déplacer avec elle donc je suppose que c'est mieux de laisser faire le navigateur.
Vous pouvez faire partie dynamique avec JavaScript pour la mise à jour de la barre d'outils de la hauteur et du contenu-wrapper-dessus, mais pas trouvé de solution sans le positionnement absolu!
OriginalL'auteur Alexandre Lavoie
C'est aussi propre qu'il peut obtenir en pensant à votre question initiale mentionne la barre d'outils a un fixe hauteur. Un minimum de code, pas de wrapper éléments et pas de tables nécessaires, IE8+/Chrome/Fox compatible.
Cependant, dans les commentaires de la Dale de la solution, vous parler de la barre d'outils de la hauteur de la souplesse, au lieu et à l'obligation pour l'iframe à régler, c'est l'un des principaux gamechanger et je vous suggère de bande que de vos exigences, car il est pratiquement impossible à réaliser dans CSS2 sans JS et/ou d'horribles les hacks CSS. Si vous ne souhaitez pas que IE<=9 compatibilité, ce serait tout à fait possible à l'aide de CSS3 flexbox.
Puisque la raison de la barre d'outils flexible de la hauteur serait de l'animation pour les différents états comme vous l'avez mentionné, je vous suggère d'utiliser le code ci-dessous et de les animer de la barre d'outils hauteur et iframe padding-top dans le même temps pour atteindre la flexibilité souhaitée au lieu de simplement la barre d'outils de la hauteur. Il ne nécessite pas de supplément de JavaScript en dehors de l'animation elle-même, de sorte que le seul "inconvénient" est d'animer les 2 propriétés au lieu de 1. Le reste de la mise en page de régler finement.
OriginalL'auteur mystrdat
Se débarrasser de la de défilement verticale
L'aide de ce code devrait quitter avec seulement l'intérieur (
iframe
) scrolls:Notes:
width
est nécessaire (comme avecabsolute
).absolute
pas vous aider.Prise En Charge Du Navigateur:
Peut-être un peu buggé, mais doit être pris en charge comme de IE7 (quirksmode).
Espère que j'ai le droit de la question.
OriginalL'auteur 222
La solution est
OriginalL'auteur user1972007
Je pense que vous pouvez tout simplement cacher la mère de la barre de défilement et obtenir ce que vous voulez. Comme par le simple ajout d'overflow-y masqué:
OriginalL'auteur Vivek Muthal
Cela devrait le faire! Voici l'aperçu rapide lien: http://jsfiddle.net/AmVhK/15/show/
Je l'ai testé dans Chrome et IE8 et ça fonctionne de mon côté. Il pourrait bug dans JSFiddle dans IE8 mais il ne devrait pas si vous l'afficher sur une page séparée (dans des conditions normales).
Edit:
Fait quelques légères modifications au code original. Cependant, vous devez changer le
<td>
qui contient l'iFrame hauteur de la valeur à la nouvelle hauteur si vous modifiez la hauteur de la barre d'outils. Avec IE il n'y a pas de magie % de la valeur (sauf si vous utilisez JS, que vous ne voulez pas de cours), c'est juste un essai et d'erreur.Essayé de vous embêter avec la taille du navigateur, la barre de défilement apparaîtra si vous allez en vertu de 1/3 de l'écran (du moins c'est ce que je suis en train de vivre), l'iFrame à l'échelle de grandes navigateur tailles sans aucun problème, d'ailleurs je suis en train de travailler sur un 15" ordinateur portable, il pourrait poser des problèmes avec les netbooks, mais sans JS, je pense que c'est proche de la meilleure solution (pas référence à ma solution, à l'aide d' % des valeurs pour la hauteur).
Je pense que je suis d'accord. J'ai résolu ce problème avant, mais toujours avec quelques astuces javascript.
Je downvoted parce que c'est pas une bonne solution. À l'aide de tableaux pour ce qui est inutile et sémantique-sage mauvais, et le pourcentage de la hauteur de l'aire de jeux que vous essayez de suggérer, c'est créer plus de problèmes qu'il tente de résoudre.
Eh bien, le propriétaire nous a dit que le balisage changement est ok "si nécessaire", que personnellement, je comprends que vous ne pouvez changer les balises, mais il n'est pas vraiment préférable. J'ai juste fourni une solution pour ce qui existait, mais ne me dites ce que vous utilisez "avec des tables" et sans JS pour résoudre le problème? Je vois que vous êtes très bien informé dans ce sens afin que je puisse avoir des choses à apprendre de vous.
OriginalL'auteur Hazard in Code