hi I want a grid image not go out of screen mean 10-20 grid

hi I want a grid image not go out of screen mean 10-20 grid

Target ---> Each grid contain an image and not going out of screen.
but here i post a program that an image large size but it's not fit between header and footer .
mean content grid must between header and footer , no gap between header and footer .

************

  3. <style>
  4. html, body {
  5.     height : 100%;
  6. }
  7. #map-page {
  8.     height : 100%;
  9. }
  10. #map-page .ui-header {
  11.     height : 40px;
  12. }
  13. #map-page .ui-content {
  14.     position : absolute;
  15.     top      : 0;
  16.     right    : 0;
  17.     bottom   : 0;
  18.     left     : 0;
  19.     width    : 100%;
  20.     height   : 100%;
  21.    
  22. }
  23. #map-page .ui-footer {
  24.     position : absolute;
  25.     bottom   : 0;
  26.     left     : 0;
  27.     width    : 100%;
  28.     height   : 30px;
  29.    
  30. }
  31. .ork_image_div img{
  32. width:100%;
  33. height:auto;
  34. }
  35. </style>
  36. <!DOCTYPE HTML>

  38. <html>
  39.     <head>
  40.      <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
  41.         <link rel="stylesheet" href="jquery.mobile.structure-1.2.0.min.css" />
  42.         <link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
  43.         <script src="jquery-1.8.1.min.js"></script>
  44.         <script src="jquery.mobile-1.2.0.min.js"></script>

  46.     </head>  
  47.     <body >  
  48.  <div data-role="page" id="map-page">
  49.     <div data-role="header">
  50.         <h1>Header</h1>
  51.     </div>
  52.    
  53. <div id = "content" style="border:1px solid #00ff00;">     
  55.  
  56. <div class="ui-grid-b" >
  57. <div class="ui-block-a" style="text-align:center;border:1px solid #ff0000;">  <img alt="" src="images/city.jpg" style="width: 100%; height: auto"  /></div>
  58. <div class="ui-block-b" style="text-align:center;border:1px solid #ff0000;">  <img alt="" src="images/city.jpg"  style="width: 100%; height: auto" /></div>
  59. <div class="ui-block-c" style="text-align:center;border:1px solid #ff0000;">  <img alt="" src="images/city.jpg" style="width: 100%; height: auto" /></div>
  60. </div>
  62. <div class="ui-grid-b">
  63. <div class="ui-block-a" style="text-align:center;border:1px solid #ff0000;">  <img alt="" src="images/city.jpg" style="width: 100%; height: auto"  /></div>
  64. <div class="ui-block-b" style="text-align:center;border:1px solid #ff0000;">  <img alt="" src="images/city.jpg" style="width: 100%; height: auto" /></div>
  65. <div class="ui-block-c" style="text-align:center;border:1px solid #ff0000;">  <img alt="" src="images/city.jpg"  style="width: 100%; height: auto" /></div>
  66. </div>
  68. <div class="ui-grid-b">
  69. <div class="ui-block-a" style="text-align:center;border:1px solid #ff0000;">  <img alt="" src="images/city.jpg" style="width: 100%; height: auto" /></div>
  70. <div class="ui-block-b" style="text-align:center;border:1px solid #ff0000;">  <img alt="" src="images/city.jpg"  style="width: 100%; height: auto" /></div>
  71. <div class="ui-block-c" style="text-align:center;border:1px solid #ff0000;">  <img alt="" src="images/city.jpg"  style="width: 100%; height: auto" /></div>
  72. </div>
  75.     
  76.     </div>
  77.     
  78.     
  79.     
  80.     <div data-role="footer">
  81.         <p>Footer</p>
  82.     </div>
  83. </div>


  86. </body>
  87. </html>