jQuery UI Dialog Autosize issue

by darcon77

HTML

<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">
<div id="dialog">
    <div id="tabs">
          <ul>
            <li >  
                <a href="#tab1">tab1</a>  
            </li>  
            
            <li >  
                <a href="#tab2">tab2</a>  
            </li>  
            
            <li >  
                <a href="#tab3" >tab3</a>  
            </li>  
            
            <li >  
                <a href="#tab4" >tab4</a>  
            </li>  
            
            <li >  
                <a href="#tab5" >tab5</a>  
            </li>  

          </ul>
          <div id="tab1"  style="padding: 5px; position: relative;">
        <div style="width:318px; height:600px;">
            
        </div>
        </div>
        <div id="tab2"  style="padding: 5px; position: relative;">
        <div style="width:318px; height:200px;">
            
        </div>
        </div>
        <div id="tab3"  style="padding: 5px; position: relative;">
        <div style="width:318px; height:500px;">
            
        </div>
        </div>
        <div id="tab4"  style="padding: 5px; position: relative;">
        <div style="width:318px; height:100px;">
            
        </div>
        </div>
        
        <div id="tab5"  style="padding: 5px; position: relative;">
        <div style="width:318px; height:800px;">
            
        </div>
        </div>
</div>

JavaScript

$("#tabs").tabs();
$("#dialog").dialog({height:"auto"});