title: Dynamically fit webpage into browser vertically
body: <p>I'm relatively new to all of this and have been working on a page for the last week. I've found this site to be very useful so far but I can't seem to get my page to dynamically fit entirely on the browser window vertically. I want it to shrink the elements so that it all fits in the browser without a vertical scroll bar. The reason for this is simple, it will be a landing page that is mobile app inspired, press the button and it will take you to where you need to go. However, users will have different screen sizes/resolutions, so the page must be fluid.</p>
  
  <p>I have managed to get the page to shrink according to the width of the browser, as demonstrated here (<a href="http://jsfiddle.net/Marty_j1/Lykr2/1/" rel="nofollow noreferrer">jsFiddle Demo</a>). </p>
  
  <pre><code> container {
      padding: 1% 1%;
      width: 80%;
      height: 100%;
      max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
      /*min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
      margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
  }
  </code></pre>
  
  <p>As you can see, all elements shrink dynamically based on the width of the browser. However, when viewed on a 1024x768 screen, the bottom row of "buttons" is half cut off by the browser and the user has to scroll to see the rest.</p>
  
  <p>I have tried a few solutions on this site but cannot seem to get it to work. Can anybody here help me to get it to adjust dynamically to the browser's width AND height?</p>
  
  <p>To better illustrate what I would like, this is the effect I would like to see <a href="http://eseb.net/potos.php?f=best_of/indianpeaks_2.jpg" rel="nofollow noreferrer">dynamic resizing example</a></p>
  
  <p>Here is an image that shows exactly what my problem is <a href="http://img404.imageshack.us/img404/5840/resolutionissue.jpg" rel="nofollow noreferrer">Difference in Resolution http://img404.imageshack.us/img404/5840/resolutionissue.jpg</a></p>
  
  <p>Note that the spacing between the buttons shrinks due to the percentage spacing but the images will shrink to fit if the window is adjusted horizontally only. I need it to squeeze the whole thing into the browser window.</p>