title: JQuery Mobile scrollview fit to screen height
body: <p>I want <code>scrollview</code> in <code>JQuery Mobile</code> to fit on the screen height.</p>
  
  <p>I want three rows of items, and height of the items should be changed automatically when page resizes.</p>
  
  <p>this is my <code>scrollview container</code> css code:</p>
  
  <pre><code>    .threeByThree {
          border: solid 0px black;
          background-color: #ccc;
          overflow: hidden;
          width: 100%;
          height: 80%;
          padding-top:10px;
          padding-left:10px;
      }
  </code></pre>
  
  <p>and this is the css code of elements inside <code>scrollview</code>:</p>
  
  <pre><code>    .square {
          width: 200px;
          height: 30%;
          border: solid 0px #333;
          text-align: center;
          line-height: 100px;
          font-size: 20px;
          margin: 10px 10px 10px 10px;
      }
  </code></pre>
  
  <p>Also page and content elements are this css code : <code>height:100%</code>.</p>
  
  <p>my complete page code is <a href="http://pastie.org/4171015" rel="nofollow">here</a>.</p>
  
  <p>But it don't work correctly. When I change the height of the browser (by resizing browser), sometimes a scrollbar appears, and elements are not resized correctly...</p>
  
  <p>What is the problem?</p>