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