remove unwanted space from page

I was working on this site in a custom template using all the possibilities of advanced custom filed plugin MY Site i have created a few custom fields and called the filed values using the following code.

<div class="category-images"><?php echo get_field( "category_heading_1" ); ?></div>
<div class="images">
<?php 

$image1 = get_field('image_1'); 
$image2 = get_field('image_2');
$image3 = get_field('image_3');
$image4 = get_field('image_4');
$image5 = get_field('image_5');
$image6 = get_field('image_6');
$image7 = get_field('image_7');
$image8 = get_field('image_8');
$image9 = get_field('image_9');
?>

<div class="img1"><a href="<?php echo get_field( "image_link_1" ); ?>"><img src="<?php echo $image1['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_2" ); ?>"><img src="<?php echo $image2['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_3" ); ?>"><img src="<?php echo $image3['url']; ?>" /></a></div>
</div>
  <div class="images_txt">
    <div class="img_txt"><b><?php echo get_field( "image_heading_1" ); ?></b> </div>
    <div class="img_txt1"><b><?php echo get_field( "image_heading_2" ); ?></b> </div>
    <div class="img_txt2"><b><?php echo get_field( "image_heading_3" ); ?></b> </div>
</div> 
<div class="images">
<div class="img1"><a href="<?php echo get_field( "image_link_4" ); ?>"><img src="<?php echo $image4['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_5" ); ?>"><img src="<?php echo $image5['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_6" ); ?>"><img src="<?php echo $image6['url']; ?>" /></a></div>
</div>
<div class="images_txt"> 
 <div class="img_txt"><b><?php echo get_field( "image_heading_4" ); ?> </b></div>
   <div class="img_txt1"><b><?php echo get_field( "image_heading_5" ); ?> </b></div>
   <div class="img_txt2"><b><?php echo get_field( "image_heading_6" ); ?> </b></div>
</div> 
<div class="images">
<div class="img1"><a href="<?php echo get_field( "image_link_7" ); ?>"><img src="<?php echo $image7['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_8" ); ?>"><img src="<?php echo $image8['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_9" ); ?>"><img src="<?php echo $image9['url']; ?>" /></a></div>
</div>
<div class="images_txt">  
<div class="img_txt"><b><?php echo get_field( "image_heading_7" ); ?> </b></div>
  <div class="img_txt1"><b><?php echo get_field( "image_heading_8" ); ?></b> </div>
  <div class="img_txt2"><b><?php echo get_field( "image_heading_9" ); ?></b> </div>
   </div>

   <div class="category-images"><?php echo get_field( "category_heading_2" ); ?></div>
<div class="images">
<?php 

$image_21 = get_field('image_2(1)'); 
$image_22 = get_field('image_2(2)'); 
$image_23 = get_field('image_2(3)'); 
$image_24 = get_field('image_2(4)'); 
$image_25 = get_field('image_2(5)'); 
$image_26 = get_field('image_2(6)'); 
$image_27 = get_field('image_2(7)'); 
$image_28 = get_field('image_2(8)'); 
$image_29 = get_field('image_2(9)'); 

?>

<div class="img1"><a href="<?php echo get_field( "image_link_2(1)" ); ?>"><img src="<?php echo $image_21['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_2(2)" ); ?>"><img src="<?php echo $image_22['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_2(3)" ); ?>"><img src="<?php echo $image_23['url']; ?>" /></a></div>
</div>
<div class="images_txt">
<div class="img_txt"><b><?php echo get_field( "image_heading_2(1)" ); ?></b> </div>
<div class="img_txt1"><b><?php echo get_field( "image_heading_2(2)" ); ?></b> </div>
<div class="img_txt2"><b><?php echo get_field( "image_heading_2(3)" ); ?></b> </div>
</div> 
<div class="images">
<div class="img1"><a href="<?php echo get_field( "image_link_2(4)" ); ?>"><img src="<?php echo $image_24['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_2(5)" ); ?>"><img src="<?php echo $image_25['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_2(6)" ); ?>"><img src="<?php echo $image_26['url']; ?>" /></a></div>
</div>
<div class="images_txt"> 
 <div class="img_txt"><b><?php echo get_field( "image_heading_2(4)" ); ?> </b></div>
  <div class="img_txt1"><b><?php echo get_field( "image_heading_2(5)" ); ?> </b></div>
  <div class="img_txt2"><b><?php echo get_field( "image_heading_2(6)" ); ?> </b></div>
</div> 
<div class="images">
<div class="img1"><a href="<?php echo get_field( "image_link_2(7)" ); ?>"><img src="<?php echo $image_27['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_2(8)" ); ?>"><img src="<?php echo $image_28['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_2(9)" ); ?>"><img src="<?php echo $image_29['url']; ?>" /></a></div>
</div>
<div class="images_txt">  
<div class="img_txt"><b><?php echo get_field( "image_heading_2(7)" ); ?> </b></div>
  <div class="img_txt1"><b><?php echo get_field( "image_heading_2(8)" ); ?></b> </div>
  <div class="img_txt2"><b><?php echo get_field( "image_heading_2(9)" ); ?></b> </div>
   </div>

So in my case I have added only 3 fileds as custom filed from backend.I have assigned it 9 because there can be future additions.as i have only 3 products and when its displaying at the front end the page is taking space for the fileds which I have not entered.The source code shows the div for each custom fileds even if it has nothing to dispaly.So the user have scroll down a bit more to reach footer.You can see it HERE .Is there any way the height of that div increases automatically when future images are added.Please help,Thanks!!