title: How to adjust CSS settings for jquery.simply-scroll plugin to occupy full screen
body: <p>I am trying to use jquery simply scroll plug-in t animate loop infinite scrolling. I have my outline of the Html as follows:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;!- title,link,script tags go here... --&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="holder" style="position : relative;"&gt;
    &lt;div id="slider" style="position : fixed; overflow : hidden; z-index : -1;"&gt;
      &lt;ul id="scroller"&gt;
        &lt;li&gt;&lt;img src="img/1.jpg" /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="img/2.jpg" /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="img/3.jpg" /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="ing/4.jpg" /&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div id="main" style="position : absolute"&gt;&lt;!- Holds the page r site contenys --&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>the default <code>jquery.simply-scroll.css</code> (unedited) provided with simply scroll plug-in zip archive is as follows:</p>
  
  <pre><code>/*
   * simplyScroll 2 - a scroll-tastic jQuery plugin
   *
   * http://logicbox.net/jquery/simplyscroll
   *
   * Copyright (c) 2009-2012 Will Kelly - http://logicbox.net
   *
   * Dual licensed under the MIT and GPL licenses.
   *
   * Last revised: 31/01/2012
   *
   */
  
  /* Default/Master classes 
  
  Example markup format (for horizontal scroller)
  Note all DIVs are generated and should not be hard-coded
  
  &lt;div class="your-custom-class simply-scroll-container"&gt;
      &lt;div class="simply-scroll-btn simply-scroll-btn-left"&gt;&lt;/div&gt;
      &lt;div class="simply-scroll-btn simply-scroll-btn-right"&gt;&lt;/div&gt;
      &lt;div class="simply-scroll-clip"&gt;
          &lt;ul class="simply-scroll-list"&gt;
              &lt;li&gt;...&lt;/li&gt;
              ...
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  */
  
  .simply-scroll-container { /* Container DIV - automatically generated */
      position: relative;
  }
  
      .simply-scroll-clip { /* Clip DIV - automatically generated */
          position: relative;
          overflow: hidden;
      }
  
      .simply-scroll-list { /* UL/OL/DIV - the element that simplyScroll is inited on */
          overflow: hidden;
          margin: 0;
          padding: 0;
          list-style: none;
      }
  
          .simply-scroll-list li {
              padding: 0;
              margin: 0;
              list-style: none;
          }
  
          .simply-scroll-list li img {
              border: none;
              display: block;
          }
  
      .simply-scroll-btn {
          position: absolute;
          background-image: url(buttons.png);
          width: 42px;
          height: 44px;
          z-index:3;
          cursor: pointer;
      }
  
      .simply-scroll-btn-left {
          left: 6px;
          bottom: 6px;
          background-position: 0 -44px;
      }
      .simply-scroll-btn-left.disabled {
          background-position: 0 0 !important;
      }
      .simply-scroll-btn-left:hover, .simply-scroll-btn-left:focus {
          background-position: 0 -88px;
      }
  
      .simply-scroll-btn-right {
          right: 6px;
          bottom: 6px;
          background-position: -84px -44px;
      }
      .simply-scroll-btn-right.disabled {
          background-position: -84px 0 !important;
      }
      .simply-scroll-btn-right:hover, .simply-scroll-btn-right:focus {
          background-position: -84px -88px;
      }
  
      .simply-scroll-btn-up {
          right: 6px;
          top: 6px;
          background-position: -126px -44px;
      }
      .simply-scroll-btn-up.disabled {
          background-position: -126px 0 !important;
      }
      .simply-scroll-btn-up:hover, .simply-scroll-btn-up:focus {
          background-position: -126px -88px;
      }
  
      .simply-scroll-btn-down {
          right: 6px;
          bottom: 6px;
          background-position: -42px -44px;
      }
      .simply-scroll-btn-down.disabled {
          background-position: -42px 0 !important;
      }
      .simply-scroll-btn-down:hover, .simply-scroll-btn-down:focus {
          background-position: -42px -88px;
      }
  
      .simply-scroll-btn-pause {
          right: 6px;
          bottom: 6px;
          background-position: -168px -44px;
      }
      .simply-scroll-btn-pause:hover, .simply-scroll-btn-pause:focus {
          background-position: -168px -88px;
      }
  
      .simply-scroll-btn-pause.active {
          background-position: -84px -44px;
      }
      .simply-scroll-btn-pause.active:hover, .simply-scroll-btn-pause.active:focus {
          background-position: -84px -88px;
      }
  
      /* Custom class modifications - override classees
  
      .simply-scroll is default
  
      */
  
      .simply-scroll { /* Customisable base class for style override DIV */
          width: 576px;
          height: 200px;
          margin-bottom: 1em;
      }
  
          .simply-scroll .simply-scroll-clip {
              width: 576px;
              height: 200px;
          }
  
              .simply-scroll .simply-scroll-list {}
  
              .simply-scroll .simply-scroll-list li {
                  float: left;
                  width: 290px;
                  height: 200px;
              }
              .simply-scroll .simply-scroll-list li img {}
  
          .simply-scroll .simply-scroll-btn {}
  
          .simply-scroll .simply-scroll-btn-left {}
          .simply-scroll .simply-scroll-btn-left.disabled {}
          .simply-scroll .simply-scroll-btn-left:hover {}
  
          .simply-scroll .simply-scroll-btn-right {}
          .simply-scroll .simply-scroll-btn-right.disabled {}
          .simply-scroll .simply-scroll-btn-right:hover {}
  
          .simply-scroll .simply-scroll-btn-up {}
          .simply-scroll .simply-scroll-btn-up.disabled {}
          .simply-scroll .simply-scroll-btn-up:hover {}
  
          .simply-scroll .simply-scroll-btn-down {}
          .simply-scroll .simply-scroll-btn-down.disabled {}
          .simply-scroll .simply-scroll-btn-down:hover {}
  
  
  
      /* Vertical scroller example */
  
      .vert { /* wider than clip to position buttons to side */
          width: 340px;
          height: 400px;
          margin-bottom: 1.5em;
      }
  
          .vert .simply-scroll-clip {
              width: 290px;
              height: 400px;
          }
  
              .vert .simply-scroll-list {}
  
              .vert .simply-scroll-list li {
                  width: 290px;
                  height: 200px;
              }
              .vert .simply-scroll-list li img {}
  
          .vert .simply-scroll-btn {}
  
          .vert .simply-scroll-btn-up { /* modified btn pos */
              right: 0;
              top: 0;
          }
          .vert .simply-scroll-btn-up.disabled {}
          .vert .simply-scroll-btn-up:hover {}
  
          .vert .simply-scroll-btn-down { /* modified btn pos */
              right: 0;
              top: 52px;
          }
          .vert .simply-scroll-btn-down.disabled {}
          .vert .simply-scroll-btn-down:hover {}
  
          /* NOTE left-right classes wouldn't be needed on vertical scroller */
  </code></pre>
  
  <p>This above css when linked to the HTML works same in all browsers. The scroll effect covers 570x200px on top left of the background. But when I try t customize it to occupy the complete screen it behaves unexpectedly, i.e. it wrks ok in IE10 &amp; Firefox but doesn't do in Chrome. The customized version of the above CSS is as follows:</p>
  
  <pre><code>/*
   * simplyScroll 2 - a scroll-tastic jQuery plugin
   *
   * http://logicbox.net/jquery/simplyscroll
   *
   * Copyright (c) 2009-2012 Will Kelly - http://logicbox.net
   *
   * Dual licensed under the MIT and GPL licenses.
   *
   * Last revised: 31/01/2012
   *
   */
  
  /* Default/Master classes 
  
  Example markup format (for horizontal scroller)
  Note all DIVs are generated and should not be hard-coded
  
  &lt;div class="your-custom-class simply-scroll-container"&gt;
      &lt;div class="simply-scroll-btn simply-scroll-btn-left"&gt;&lt;/div&gt;
      &lt;div class="simply-scroll-btn simply-scroll-btn-right"&gt;&lt;/div&gt;
      &lt;div class="simply-scroll-clip"&gt;
          &lt;ul class="simply-scroll-list"&gt;
              &lt;li&gt;...&lt;/li&gt;
              ...
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  */
  
  .simply-scroll-container { /* Container DIV - automatically generated */
      position: relative;
  }
  
      .simply-scroll-clip { /* Clip DIV - automatically generated */
          position: relative;
          overflow: hidden;
      }
  
      .simply-scroll-list { /* UL/OL/DIV - the element that simplyScroll is inited on */
          overflow: hidden;
          margin: 0px;
          padding: 0px;
          list-style: none;
      }
  
          .simply-scroll-list li {
              padding: 0px;
              margin: 0px;
              list-style: none;
          }
  
          .simply-scroll-list li img {
              border: none;
              display: block;
          }
  
      .simply-scroll-btn {
          position: absolute;
          background: url('../img/buttons/buttons.png');
          width: 42px;
          height: 44px;
          z-index:3;
          cursor: pointer;
      }
  
      .simply-scroll-btn-left {
          left: 6px;
          bottom: 6px;
          background-position: 0 -44px;
      }
      .simply-scroll-btn-left.disabled {
          background-position: 0 0 !important;
      }
      .simply-scroll-btn-left:hover, .simply-scroll-btn-left:focus {
          background-position: 0 -88px;
      }
  
      .simply-scroll-btn-right {
          right: 6px;
          bottom: 6px;
          background-position: -84px -44px;
      }
      .simply-scroll-btn-right.disabled {
          background-position: -84px 0 !important;
      }
      .simply-scroll-btn-right:hover, .simply-scroll-btn-right:focus {
          background-position: -84px -88px;
      }
  
      .simply-scroll-btn-up {
          right: 6px;
          top: 6px;
          background-position: -126px -44px;
      }
      .simply-scroll-btn-up.disabled {
          background-position: -126px 0 !important;
      }
      .simply-scroll-btn-up:hover, .simply-scroll-btn-up:focus {
          background-position: -126px -88px;
      }
  
      .simply-scroll-btn-down {
          right: 6px;
          bottom: 6px;
          background-position: -42px -44px;
      }
      .simply-scroll-btn-down.disabled {
          background-position: -42px 0 !important;
      }
      .simply-scroll-btn-down:hover, .simply-scroll-btn-down:focus {
          background-position: -42px -88px;
      }
  
      .simply-scroll-btn-pause {
          right: 6px;
          bottom: 6px;
          background-position: -168px -44px;
      }
      .simply-scroll-btn-pause:hover, .simply-scroll-btn-pause:focus {
          background-position: -168px -88px;
      }
  
      .simply-scroll-btn-pause.active {
          background-position: -84px -44px;
      }
      .simply-scroll-btn-pause.active:hover, .simply-scroll-btn-pause.active:focus {
          background-position: -84px -88px;
      }
  
  /* Custom class modifications - override classees
  
  .simply-scroll is default
  
  */
  
  .simply-scroll { /* Customisable base class for style override DIV */
      width: inherit;
      height: inherit;
      margin: 0;
  }
  
      .simply-scroll .simply-scroll-clip {
          width: inherit;
          height: inherit;
      }
  
          .simply-scroll .simply-scroll-list {}
  
          .simply-scroll .simply-scroll-list li {
              float: left;
  /*          height:100%;
              width: auto;
              background: yellow;
  */      }
          .simply-scroll .simply-scroll-list li img {
              height: 100%;
              width: auto;
          }
  
      .simply-scroll .simply-scroll-btn {}
  
      .simply-scroll .simply-scroll-btn-left {}
      .simply-scroll .simply-scroll-btn-left.disabled {}
      .simply-scroll .simply-scroll-btn-left:hover {}
  
      .simply-scroll .simply-scroll-btn-right {}
      .simply-scroll .simply-scroll-btn-right.disabled {}
      .simply-scroll .simply-scroll-btn-right:hover {}
  
      .simply-scroll .simply-scroll-btn-up {}
      .simply-scroll .simply-scroll-btn-up.disabled {}
      .simply-scroll .simply-scroll-btn-up:hover {}
  
      .simply-scroll .simply-scroll-btn-down {}
      .simply-scroll .simply-scroll-btn-down.disabled {}
      .simply-scroll .simply-scroll-btn-down:hover {}
  </code></pre>
  
  <p>Please point out the problems &amp; solutions to the same. The link to my design is below:</p>
  
  <pre><code> - http://appspot.comyr.com/restaurants_hd/      main site
   - http://appspot.comyr.com/restaurants_hd/js/  Js files
   - http://appspot.comyr.com/restaurants_hd/css/ css files
   - http://appspot.comyr.com/restaurants_hd/img/ image files
  </code></pre>
  
  <p>Try out the link to main site in IE, Firefox, Chrome you can notice the problem. Even in some cases the scroll works but out if the 4 images only 1 or sometimes 2 images are displayed and the rest images vanish.</p>
  
  <p>Please help me out with the correct settings such that the scroll fills up the complete screen (irrespective of screen resolution).</p>
  
  <p>Thanks &amp; Regards.</p>