Redimension hauteur bloc après apparition d'un autre bloc

**Faror** · 17/09/2012, 12h08

Bonjour à tous!

Voila je souhaite créer une page dans laquelle l'on peut faire apparaitre 2 blocs en fonction du choix des options d'un select. J'ai donc créé une fonction qui permet de faire cela, mais un problème se pose au niveau de la taille de mon bloc qui contient mes blocs à afficher en modifiant la valeur de "display".

Voici une version de mon script simplifiée:
HTML:

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
  </head>
  <body>
   <div id="content"> 		
    <form  action="content.php" method="post" onsubmit="return verifForm(this)" enctype="multipart/form-data">
 
       <table id="h_table">
	<tr>
	  <td><label>Horaires :</label></td>
	  <td>
	    <select id="type_horaires" name="choix_horaires">                          		                                                 <option value="">-- Séléctionnez--</option>
	      <option id="choix_h1" value="1">Mêmes horaires tous les jours</option>
	      <option id="choix_h2" value="2">Horaires différentes pour chaque jour</option>
	    </select>
	</td>
       </tr>
     </table>  
 
     <table id="h1_table" style="display: none;">
       <tr><td>Contenu 1</td></tr>
     </table>
 
     <table id="h2_table" style="display: none;">
       <tr><td>Contenu 2</td></tr>
     </table>
 
      <input style="width: 70px; height: 30px; color : white; background: red; padding: 7px; margin: 15px 0 0 100px" id="submit" type="submit" value="Ajouter"/>
    </form>
  </div>
 
  </body>
  <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
  <script type="text/javascript" src="js/toDisplay.js"></script>
</html>

CSS

Code :

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

1
2
 
#content{ background:url(../images/bg_content.gif) left top repeat-x #FFFFFF; width:938px; border-left:1px solid #9c9c9c; border-right:1px solid #9c9c9c; padding: 10px 0px; min-height: auto;}

jQuery:
toDisplay.js:

Code :

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

1
2
3
4
5
6
 
$(function({
    $('#choix_h1').click(function(){
        $('#h1_table').css('display', 'inline');  
					      });
});

J'aimerai donc savoir comment doit je faire, pour que le bloc "#content" se redimensionne et donc que ca hauteur augmente lorsque l'on ouvre h1_table ou h2_table?
Existe-il une propriété css qui fait cela, ou comme on l'ouvre grave au javascript/jQuery, il faut redimensionner le bloc "#content" en jQuery?

Merci d'avance

**MaitreKaio** · 17/09/2012, 14h52

Je ne comprends pas bien ton problème. Etant donné que ton bloc 'content' est parent des deux blocs que tu affiches à la demande, et qu'a priori tu n'as pas fixé sa hauteur, le comportement par défaut devrait être le bon. C'est à dire qu'il devrait s'agrandir pour s'adapter à la taille de ses enfants visibles. Si ce n'est pas le cas, peux-tu être plus précis dans ta description de ce qui se passe ?