11548 sujets

JavaScript, DOM et API Web HTML5

Adapter la hauteur d'un div en fonction d'un autre

Bonjour,

Je suis en train de faire une webapp HTML5/CSS3/Javascript et jQuery Mobile.
Dans cette appli, j'ai plusieurs pages (chacune dans un div) et un menu (dans un autre div) séparé qui s'affiche à gauche via un bouton ou via le swipe avec le doigt.

Voici un extrait de mon code : 

<div id="menu">
  <header>...</header>
  <ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
  </ul>
</div>

<div id="page1" data-role="page">
  <div data-role="header">
  ...
  </div>
  <div class="submain">
  ...
  </div>
</div>

<div id="page2" data-role="page">
  <div data-role="header">
  ...
  </div>
  <div class="submain">
  ...
  </div>
</div>


Les différentes pages ont des hauteurs dynamiques (elles ne sont pas fixes) et chaque page n'a pas la même hauteur.
J'aimerais que mon menu prenne la hauteur de la page ouverte à droite.

Existe-t'il un script pour cela ?
Modifié par Yuuko (20 Sep 2012 - 11:23)
J'ai essayé cette méthode et malheureusement ça ne fonctionne pas...
J'ai essayé autre chose mais il y a quelques soucis.

Voici le script que j'ai écrit :

$(document).on("pageinit", "#logs1", function () {

    var hauteur = $("#logs1").height();
    $(".showMenu").click(function () {
		$("#menu").css("height", hauteur);
    });
});


"logs1" correspond à une de mes pages et "showMenu" est le bouton qui permet d'afficher le menu à gauche.
Je dis donc qu'à l'initialisation de ma page qui a pour id "logs1", la hauteur de mon menu prend la hauteur de ma page "logs1".
Mais on dirait que lorsque ma page a une hauteur inférieure à 600px, ça ne fonctionne pas.
Par exemple, si ma page logs1 fait 543px, mon menu fait 418px.
Lorsque je rajoute un "alert(hauteur);" dans ma fonction, il me dit que la hauteur de ma page fait 418px alors qu'elle en fait en réalité 543px.
Par contre, si ma page logs1 fait 1000px, mon menu prend bien cette hauteur.

Comment se fait-il que la valeur de la hauteur récupérée ne soit pas la bonne ?
Modifié par Yuuko (21 Sep 2012 - 10:39)
Peut être que ton script va trop vite et s’exécute avant même que la div soit affiché complètement. Du coup la hauteur n'est pas la bonne. Essaye de rajouter un timeout/delai avant de récup la hauteur de la div.
Yuuko
a écrit :
J'ai essayé cette méthode [display: table-cell] et malheureusement ça ne fonctionne pas...

ça doit marcher.

Si ça ne marche pas, c'est que le problème est ailleurs, que tu as mal lu le tuto, etc.

Y a-t-il du code avant tes deux colonnes ? Si oui, tu dois les inclure dans un élément parent.

Bonne continuation.
Modifié par thierry (21 Sep 2012 - 13:58)
thierry a écrit :

ça doit marcher.


Ouep, mais a mon avis ces pages ont une position absolute et pas forcément son menu.


Par contre pour la hauteur, fait attention avec l'utilisation de .height() et jquery. Regarde bien la doc : http://api.jquery.com/height/

car si t'as des marges et des padding qui traine, ça peux fausser le résultat, ou alors faut les prendre en compte après dans ton calcul.
Sujet clos
Aller à