Issue with page layout

Hi Experts,

I have 1 main div and 6 sub divs and am using HTML5,AngularJS and Bootstrap for the page.I have a dropdown in the 1st sub Div and will show the content based on dropdown value .When the page loads  default selected to "none" and  will not show any content.If user selects "option1" from dropdown  will show 3,5, 6 sub divs and if it is "option2" will show 2 and 3 sub divs and so on.My problem is when the page loads, the page layout shrinks as the dropdown value is "none" ie.no content to display. For other options will get verticall scroll bar.

What is best way to resolve this issue so that the page layout should be consistent at all times(1 sub div,2 sub divs, 3 sub divs ,none etc).

Sample html code for my page:

<form name="myform">

<div class="row"> //Main DIV

 
<div class="row"> //sub div 1
     <label class="col-lg-2">
         Status</label>
     <div class="col-lg-5">
         <select class="input-sm" ng-model="option" >
    
       <option>None</option>
       <option>option1</option>
       <option>option2</option>
       <option>option3</option>
       <option>option4</option>    
       <option>option5</option>  
       <option>option6</option>              
         </select>
     </div>
 </div>


 <div class="row"> //sub div 2
     <label class="col-lg-2">
         Row1</label>
     <div class="col-lg-5">
     
     </div>
 </div>


 <div class="row"> //sub div 3
     <label class="col-lg-2">
         Row2</label>
     <div class="col-lg-5">
            
         </select>
     </div>
 </div>

 
<div class="row"> //sub div 4
     <label class="col-lg-2">
         Row3</label>
     <div class="col-lg-5">
                       
         </select>
     </div>
</div>

</div>

<form>

Select allOpen in new window