Sujet Précédent Sujet Suivant

Div ne se redimensionne pas correctement

Fermé
su-toto Messages postés 45 Date d'inscription jeudi 5 juin 2014 Statut Membre Dernière intervention 8 novembre 2016 - Modifié par su-toto le 8/02/2016 à 10:58
 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 !

2 réponses

Réponse 1 / 2
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
8 févr. 2016 à 11:39
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
0
su-toto Messages postés 45 Date d'inscription jeudi 5 juin 2014 Statut Membre Dernière intervention 8 novembre 2016 2
8 févr. 2016 à 15:35
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 !
0
Réponse 2 / 2
su-toto Messages postés 45 Date d'inscription jeudi 5 juin 2014 Statut Membre Dernière intervention 8 novembre 2016 2
Modifié par su-toto le 9/02/2016 à 19:12
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 ?
0
beuinius
Modifié par beuinius le 9/02/2016 à 22:51
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.
0

Discussions similaires

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

22 réponses
chrome ne s'est pas arrêté correctement !
Manchego-45810 -
MPMP10 -

5 réponses
probleme fortiguard ou fortinet
befa972 -
yo bro -

37 réponses
probleme firefox la page n'est pas redirigée correctement
hideto5101 -
Dori@n -

11 réponses
Utilisation des méthodes de manipulations du DOM
SelOua_2617 -
SelOua_2617 -

5 réponses