Div ne se redimensionne pas correctement

su-toto Messages postés 45 Date d'inscription Statut Membre Dernière intervention -
beuinius - 9 févr. 2016 à 22:47

Bonjour,

Je suis actuellement en train de développer un site web qui me pose quelques problèmes au niveau d'une div qui refuse de se redimensionner dynamiquement.

Je m'explique :

J'ai une page dans laquelle j'ai une div principale qui contient une iframe qui reçois du contenu d'une page du même domaine.

Grosso modo, j'ai voulu inclure du contenu dynamique dans une iframe à hauteur dynamique dans une div qui devrait être de hauteur dynamique.

Le problème étant que vu que le redimensionnement de l'iframe se fait avec jquery APRÈS le chargement de la page (contenu dynamique oblige), la div n'a pas le temps de s'adapter a la hauteur de celle ci.

Voici le bout de code incriminé :

index.html


<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- d'autres choses ici -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.browser.js"></script>
<script>
  $(document).ready(function () {
    $('iframe').iframeAutoHeight({debug: true});
  });
</script>
</head>
<body>
<!-- Le menu et d'autres choses ici -->
<div class="content">
               <p> <h1> Bienvenue sur mon super site ! </h1> </p>
               <iframe class="frame" id="frame" src="dyn/index.php?article1/premier-article" scrolling="no"></iframe>
               <script>
                    $('iframe.frame').iframeAutoHeight({minHeight: 400});
                </script>
            
            </div>
</body>

style.css


body{
 background:#990000;
 color:#444;
 font-family: 'PT Sans Narrow', Arial, sans-serif;
 font-size:12px;
 overflow-y:scroll;
}


.content{
 margin:auto;
 width:80%;
 position:relative;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 clear:both;
 background:#ffffe5;

}
.frame{
 margin-left: 3%;
 width:95%;
 height: 100%;
 position:relative;
 clear:both;
 border: none;

 


}

Du coup la div garde la taille qu'elle devrait avoir si l'iframe n’était pas redimensionné.

Bon voila c'est peut être un peut tordu comme solution mais j'imagine que ca peut fonctionner donc si quelqu'un a une idée je suis preneur ! :)

Merci a tous !

Afficher la suite

A voir également:

Div ne se redimensionne pas correctement
Votre appareil ne dispose pas des correctifs de qualité et de sécurité importants - Guide
Div c++ - Télécharger - Langages
La page n’est pas redirigée correctement ✓ - Forum Mozilla Firefox
Un périphérique attaché au système ne fonctionne pas correctement - Windows 11
Le logiciel fortinet n'a pas été installé correctement - Forum Virus

2 réponses

Réponse 1 / 2

Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention 527

Salut,

En solution alternative, puisque la source de l'iframe semble être sur le même domaine, ne peut tu pas remplacer l'iframe par un include php ou une requête ajax ?

Bonne journée

su-toto Messages postés 45 Date d'inscription Statut Membre Dernière intervention 2

Bonjour et merci de ton intérêt !

Alors pour l'include lorsque je fait

<div>
                du bazar
               <?php include ("dyn/index.php?article1/premier-article"); ?>
               <?php echo 'test'; ?>
</div>

La page dyn/index.php ne s'affiche pas et je n'ai aucune erreur..

L'echo test apparait ce qui signifie que php fonctionne, j'ai également pris soin de modifier mon php.ini afin d'autoriser les include.

Aussi lorsque je fait

<?php include ("dyn/index.php"); ?>

Tout ce qui se trouve en dessous de cette ligne disparait !

Je n'ai que très peu manipulé AJAX, peut être la solution à mon problème ?

Merci encore !

Réponse 2 / 2

su-toto Messages postés 45 Date d'inscription Statut Membre Dernière intervention 2

OK, AJAX est plutot pas mal.

SAUF QUE :

J'utilise des css différents pour la partie dynamique et lorsque je fait :

<div id="content" class="content">
               <span> <p> contenu statique </p></span>
               <span id="dyn">
                <!--contenu dynamique -->
                </span>   
                <script>

                  $("#dyn").load("dyn/index.php")

                </script>  
                </div>

Le css de la partie dynamique viens par dessus celui de la page d’accueil et bousille tout mon template...

Une solution ?

beuinius

Salut,
distinguer les 2 CSS. par exemple si le C.S.S. de la page qui contient l'iframe indique

p{
text-align:center;
} 
et que celui chargée dans l'iframe 
p{
text-align:right;
}

L'adjonction d'une ou de 2 classes fera l'affaire:

p{
text-align:center;
} 
et que celui chargée dans l'iframe 
p.paragraphe{
text-align:right;
}

Et bien sûr ajoutez la classe correspondante en attribut HTML

<

p class=paragraphe>

edit:
Je viens de réfléchir que ça ne réglera le problème que si ce n'est pas un problème du chargement de CSS. Sinon on peux regrouper le CSS dans le même fichier dans ma solution même si c'est pas très pratique.
Il serais mieux de charger les 2 fichiers de la mise en page dans la pageprincipale:

<link src=styleprincipal.css rel=stylesheet>
<link src=stylesecondaire.css rel=stylesheet>

devrais fonctionner mais c'est à tester.

Discussions similaires

Votre pc n'a pas démarré correctement

probléme avec illustrator: forme

Un cable réseau n'est pas branché correctement ou est endommagé

IPV6 et IPV4

Photographie

Votre réponse

Discussions similaires