title: full screen divs with margin
body: <p>I have a slideshow built using the jbgallery script that I am trying to incorporate into a page on my site. The images in the slideshow have a width and height of 100%. I have a navigation bar at the bottom of the page with a height of 90 pixels.</p>
  
  <p>My code is:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  
  body{ height:100%;
    background-color:#444;
     margin: 0;}
  
   div.fullscreenslideshow{
      display:block;
      position:absolute;
      top:0;
      left:0;
      padding-bottom:90px;
      width:100%;
      height:100%;
      background-color:#000;
    }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="fullscreenslideshow"&gt;
  &lt;iframe src="slideshow.html" style="border: 0; width: 100%; height: 100%"&gt;Your browser doesn't support iFrames.&lt;/iframe&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>While this looked to have the desired effect it is producing a scroll bar on the page (as the 90 pixel padding is stretching the page beyond the 100% height it has been set to). </p>
  
  <p>Basically, how to I adjust the css to ensure I get the slideshow in the page with a 90 pixel space beneath it, and without cropping the image (by setting the height to 90% for example on the fullscreenslideshow div css) or producing an overflow?</p>
  
  <p>Been playing around with this for hours now and think I have hit the wall hence the request for help! Out of interest, when I adjusted the padding-bottom to margin-bottom there was no effect on the page.</p>
  
  <p>Thanks for any help in advance,</p>
  
  <p>JD</p>