title: how to prevent vertical scrolling in a page in responsive designing
body: <p>Here I am pasting my code. </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;script type="text/javascript" src="../js/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../js/jquery.mobile-1.4.2.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="../css/idangerous.swiper.css"&gt;
  &lt;link rel="stylesheet" href="../css/jquery.mobile-1.4.2.min.css" /&gt;
  
   &lt;title&gt;Demo&lt;/title&gt;
   &lt;style&gt;
  /* Demo Styles */
   html {
    height: 100%;
  } 
  body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    position: relative;
    height: 100%;
  }
  .swiper-container {
    width: 100%;
    height: auto;
    color: #fff;
    text-align: center;
  }
  .red-slide {
    background: #666666;
  }
  .blue-slide {
    background: #666666;
  }
  .orange-slide {
    background: #666666;
  }
  .green-slide {
    background: #666666;
  }
  .pink-slide {
    background: #666666;
  }
  .swiper-slide .title {
    font-style: italic;
    font-size: 42px;
  
    margin-bottom: 0;
    line-height: 45px;
  }
  .pagination {
    position: absolute;
    z-index: 20;
    left: 10px;
    bottom: 20%;
    margin-left: 35%;
    margin-right: 35%;
  }
  .swiper-pagination-switch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background: #222;
    margin-right: 5px;
    opacity: 0.8;
    border: 1px solid #fff;
    cursor: pointer;
  }
  .swiper-visible-switch {
    background: #aaa;
  }
  .swiper-active-switch {
    background: #fff;
  }
   .wood
   {
    height: 10%;
    width: 10%;
    margin-left:50%;
    margin-bottom: 0;
    padding-top:50%;
  
   }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
    &lt;div class="swiper-container"&gt;
      &lt;div class="swiper-wrapper"&gt;
  
        &lt;div class="swiper-slide red-slide"&gt;
         &lt;img id="trigger" class="wood" src="../images/wood.jpg" alt="US Flag "/&gt;
         &lt;p&gt;slide1&lt;/p&gt;
        &lt;/div&gt;
  
        &lt;div class="swiper-slide blue-slide"&gt;
          &lt;img id="trigger" class="wood" src="../images/wood.jpg" alt="US Flag "/&gt;
          &lt;div class="title"&gt;Slide 2&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="swiper-slide orange-slide"&gt;
          &lt;img id="trigger" class="wood" src="../images/wood.jpg" alt="US Flag "/&gt;
          &lt;div class="title"&gt;Slide 3&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="swiper-slide green-slide"&gt;
          &lt;img id="trigger" class="wood" src="../images/wood.jpg" alt="US Flag "/&gt;
          &lt;div class="title"&gt;Slide 4&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="swiper-slide pink-slide"&gt;
          &lt;img id="trigger" class="wood" src="../images/wood.jpg" alt="US Flag "/&gt;
          &lt;div class="title"&gt;Slide 5&lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;div class="pagination" style="align:center;"&gt;&lt;/div&gt;
  
       &lt;div data-theme="b" data-position="fixed" style="height:20%;"&gt;
              &lt;ul data-role="listview"&gt;
                                  &lt;li&gt;&lt;a rel="external" href="../html/index.html" style="background: #666;color:white;font-family:sans-serif"&gt;Save with lighting&lt;/a&gt;&lt;a href="#" data-rel="popup" onclick="alert('hello');"style="background: #666;"&gt;List Item&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a rel="external" href="../html/one.html" data-rel="popup" style="background: #666;color:white;font-family:sans-serif"&gt;Explore light options&lt;/a&gt;&lt;a href="#" data-rel="popup" onclick="alert('hello');"style="background: #666;"&gt;List Item&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
       &lt;/div&gt; 
     &lt;/div&gt;
     &lt;script src="../js/jquery-1.10.1.min.js"&gt;&lt;/script&gt;
    &lt;script src="../js/idangerous.swiper-2.1.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
    var mySwiper = new Swiper('.swiper-container',{
      pagination: '.pagination',
      paginationClickable: true
    })
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>here in the above code,I am unable to fit to the screen though I have done many changes in my code.Can you please give me any suggestions to resolve this issue.for this I put height:auto for the main div.thanks in advance for your suggestions</p>