Hauteur de div automatique selon la copie d'écran proposée

**nilsb13** · 16/08/2011, 16h38

Bonjour,
j'ai posté la même question dans CSS,
mais peut-être que la solution est du côté javascript ...

selon la copie d'écran suivante :

Je voudrais que la div qui est entourée d'un liseret rouge soit taillée automatiquement à l'espace restant (elle a pour le moment une hauteur fixe)
et que sont ascenseur vertical s'allume si nécessaire.

Là, on voit qu'il reste de l'espace libre, blanc, avant le bas du navigateur.

Les div qui sont avant la dernière div (entourée d'un liseret rouge) n'ont pas de hauteur connue.
=>Leur hauteur augmente en fonction du contenu, lignes de boutons ou lignes de champs de formulaire (le formulaire bleu).

quelqu'un saurait-il me donner le code javascript permettant de connaitre l'espace libre sous la div (div_boutons_resultat) qui contient "modifier supprimer interlocuteurs actions commerciales"

ce qui me permettrait de coder la hauteur de la dernière div "en live"

merci de me donner tout le nécessaire :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
html {
height				: 100%;
}
 
body {
height				: 100%;
margin: 0;
padding: 0;
}
 
#div_generale { /* celle qui englobe toute la page */
background-color : burlywood; /* marron clair */
/* code ... si nécessaire ... */
}
 
#div_ajouter_rechercher { /* zone bleu-clair */
background-color : lightblue;
/* code ... si nécessaire ... */
}
 
#div_boutons_resultat { /* boutons dans la zone vert-clair */
background-color : lightgreen;
/* code ... si nécessaire ... */
}
 
#div_resultat { /* div contenant la liste des enregistrements trouvés */
background-color : lightgreen;
overflow-y : auto;
/* code ... si nécessaire ... */
}

JAVASCRIPT :
?!?!?! là je sais pas ce qu'il faut mettre ?!?!?!

HTML :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
 
  <head>
  <!-- appel du CSS et du code javascript -->
  </head>
 
  <body>
 
    <div id="div_generale">
 
      <div id="div_ajouter_rechercher">
      </div>
 
      <div id="div_boutons_resultat">
      </div>
 
      <div id="div_resultat" height="exécution du code javascript">
      </div>
 
    </div>
 
  </body>
  </html>

mille merci pour votre aide !
Nils.

(je vois que quelqu'un est passé par là pour ajouter quelques balises, merci !)

**Willpower** · 16/08/2011, 16h47

en css un truc du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
height:auto;
top:0;

(ou alors un heigh : 100% ??)

sinon tu devras p-ê aussi jouer avec les "position:relative" ou "position:absolute" et éventuellement repositionner le "top".

et comme dis sur le sujet css, vérifie que tes éléments conteneur aient déjà un height de 100%.

**nilsb13** · 16/08/2011, 16h58

je viens de corriger ma question,
j'ai bien dans le CSS un html et un body à 100%

par contre je ne comprends pas bien ta proposition
peux-tu détailler un peu plus ?

éventuellement, tu peux faire un copier/coller du code proposé dans la question et y ajouter ton idée ...

merci pour ton aide

**Bovino** · 16/08/2011, 17h09

Envoyé par nilsb13

j'ai bien dans le CSS un html et un body à 100%

Ca n'a aucun sens

En CSS, les hauteurs en pourcentage correspondent à un rapport par rapport à l'élément conteneur, mais les balises <html> et <body> n'ont pas de conteneur à partir desquels définir ce pourcentage.
C'est un peu comme si, au supermarché, les prix étaient annoncés comme "Prix : 90%". C'est joli, mais 90% de quoi ?

Dans ton cas, il faut récupérer la taille de la fenêtre, la taille des différents éléments affichés (et les additionner) puis affecter à la dernière div la différence entre les deux.

**nilsb13** · 16/08/2011, 17h35

Merci Bovino pour ton éclaircicement très clair !

ok, je supprime les 100% qui ne servent à rien !

quelqu'un sait coder en JS ce que Bovino propose :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1) Récupérer la hauteur de la fenêtre
$hauteur_fenêtre = code_javascript_qui_trouve_la_hauteur_de_la_fenêtre;
 
2) Récupérer la hauteur des différents éléments affichés
$hauteur_div_menu = code_javascript_qui_trouve_la_hauteur_de_la_div_menu;
$hauteur_div_ajouter_rechercher = code_javascript_qui_trouve_la_hauteur_de_la_div_ajouter_rechercher;
$hauteur_div_boutons_résultat = code_javascript_qui_trouve_la_hauteur_de_la_div_boutons_résultat;
 
3) Additionner la hauteur des différents éléments affichés
$hauteur_divs_sans_scroll = $hauteur_div_menu + $hauteur_div_ajouter_rechercher + $hauteur_div_boutons_résultat
 
4) Soustraire la hauteur des éléments à la hauteur de la fenêtre
$hauteur_restante = $hauteur_fenêtre - $hauteur_divs_sans_scroll;
 
4) Affecter à la dernière div la différence entre les deux.
$hauteur_div_avec_scroll = $hauteur_restante
 
5) affecter cette valeur dans le CSS
#div_resultat {
height : codeJS[$hauteur_div_avec_scroll]px; /* ou % ? */
background-color : lightgreen;
overflow-y : auto;
}

merci,
car je n'y connais vraiment rien en JS,
je sais, c'est une tare !!!, mais bon, pas encore eu le courage de m'y attaquer !

**nilsb13** · 16/08/2011, 17h40

En CSS, les hauteurs en pourcentage correspondent à un rapport par rapport à l'élément conteneur, mais les balises <html> et <body> n'ont pas de conteneur à partir desquels définir ce pourcentage.

donc, si je comprends bien :
la fenêtre du navigateur n'est pas le conteneur principal,
c'est bien <html> qui est le conteneur principal donc (?)

dans ce cas, <body>, contenu dans <html>, peut-il être à 100% ?

Hauteur de div automatique selon la copie d'écran proposée

JavaScript

Vue hybride

Discussions similaires

Partager

Partager