title: How to modify the height of panel in JQM
body: <p>I have been trying to make the panel of Jquery mobile smaller in height . Like custom height but not able to do that although I am able to change the width of the panel easily </p>
  
  <p>I know that to modify the panel we should change following <strong>CSS</strong></p>
  
  <pre><code>.ui-panel {
      border-width: 0;
      display: block;
      max-height: none;
      min-height: 100%;
      position: absolute;
      top: 0;
      width:70% !important;
  }
  </code></pre>
  
  <p>but when I try to change the height it does not change.</p>
  
  <p>Any idea would be appreciated  </p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>The current Panel looks like this </p>
  
  <p><img src="https://i.stack.imgur.com/Z7Qmx.jpg" alt="enter image description here"></p>
  
  <p>What I want is something like this but the height should be less . Because there is white space at the end of the panel that is coming over the footer that I don't want  </p>
  
  <p><img src="https://i.stack.imgur.com/uZtLs.png" alt="enter image description here"></p>
  
  <p>Thanks &amp; Regards </p>