title: How can I dock the button to jQueryUI dialog bottom as the dialog inner content increases?
body: <p><strong>UPDATE:</strong> Sorry I make this question to complex.  </p>
  
  <p><br/><strong>What I want to ask is that how can I "fix" the buttons' position to the bottom of the jQueryUI dialog as the dialog height grow's larger.</strong>
  </p>
  
  <p>I have a jQueryUI dialog as follow:</p>
  
  <pre><code>&lt;head&gt;
  $(function(){
      $("#ChooseStoryCategory").dialog({
          autoOpen: false,
          title: "Upload",
          height: 600,
          width: 500,
          modal: true
      }); 
  });
  &lt;/head&gt;
  </code></pre>
  
  <p>And I add two buttons in the dialog and I always want to put them at the <code>bottom of the dialog</code>. Here is the code:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id= "ChooseStoryCategory"&gt;
      &lt;div id="storyCategory"&gt;&lt;/div&gt;      
  
      &lt;div&gt;&lt;button id="ChooseCategory"&gt;&lt;img src= "../pic/chooseOk.png"/&gt;&lt;/button&gt;&lt;/div&gt;
      &lt;div&gt;&lt;button id="CategoryCancel"&gt;&lt;img src= "../pic/close.png"/&gt;&lt;/button&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>css setting:</p>
  
  <pre><code>#ChooseCategory{
      position: absolute;
      left: 30%;
      top: 85%;
      bottom: 0;
  
  }
  
  #CategoryCancel{
      position: absolute;
      left: 70%;
      top: 85%;
      bottom: 0;
  }
  </code></pre>
  
  <p>But I will always increase element inside the dialog like this:</p>
  
  <pre><code>for(multiple times)://pseudocode
  var categoryName= "PressNum1";
  var value= 3;
  var $btn= $('&lt;button/&gt;').text(categoryName).width(400).height(80);
  $btn.bind('click', function(){console.log(value)});
  $("#storyCategory").append($btn);
  </code></pre>
  
  <p>As the added buttons increase, their position will exceed the two buttons(<code>ChooseCategory</code> and <code>CategoryCancel</code>). How can I dock the two buttons to the bottom of the jQueryUI dialog?</p>
  
  <p>I have tried to get the initial top position of the two buttons. As each button is added to the dialog, I just change the position of the <code>two buttons</code>.</p>
  
  <pre><code>$("#CategoryCancel").css("height") = $("#ChooseStoryCategory").css("height") * 0.85 + $btn.css("height");
  </code></pre>
  
  <p>But  </p>
  
  <pre><code>$("#ChooseStoryCategory").css("height") * 0.85 + $btn.css("height");
  </code></pre>
  
  <p>didn't add the <code>px</code>, it just combines the number and string...</p>
  
  <p><br/>
  Is there any simple alternative approach to dock the two buttons at the bottom of the jqueryUI dialog?</p>