title: Page height to 100% of viewport?
body: <p>I'll start by saying that I am very very new to web development as a whole and that this is my very first responsive site so please be gentle and bear this in mind, I am the definition of the word noob at this stage. Having searched for an answer for a while and having no luck I'm hoping that someone here could help me out.</p>
  
  <p>I'm trying to make a homepage for this website. The design is simply a block down the left hand side of the page showing the logo at the top and then a series of links underneath, all of which is on the same background. To the right of this is one big image which fills the rest of the screen. I want the whole page to fill the browser window of whatever device it is viewed on so absolutely no scrolling is necessary, i.e. width and height both 100% of the viewport. The width of the page is giving me no grief at all, sweetly adjusting to different screen sizes as I want it, with the sidebar at 20% of the width and the main image at 80%.</p>
  
  <p>The height is a different story however. I can't seem, in any combination of CSS I've tried so far, to be able to get the height to behave at 100% of the viewport. Either the sidebar is too short and the main image is too long or both are too long etc etc. The main image I want to keep the aspect ratio of and just have it overflow it's div as required to keep most of it displayed and the side bar I just want to fit to 100% of the page height. Here is my code at present: </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;style&gt;
  html
  {
  height: 100%;
  margin: 0;
  padding: 0;
  }
  
  body
  {
  height: 100%;
  margin: 0;
  padding: 0;
  }
  
  #page 
  {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  }
  
  #sidebar
  {
  float: left;
  width: 20%;
  height: 100%;
  padding-bottom: 10;
  margin: 0;
  background: url(/Images/bg.jpg);
  }
  
  #slideshow
  {
  float: right;
  width: 80%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  }
  
  #logoimg
  {
  width: 80%;
  margin-top: 10%;
  margin-left: 10%;
  margin-right: 10%;
  }
  
  #mainimg
  {
  width: 100%;
  overflow: hidden;
  }
  
  .link
  {
  font-family: courier;
  font-size: 1.3em;
  text-align: center;
  padding-top: 7%;
  padding-bottom: 1%;
  color: rgba(255,255,255,1.00); 
  }
  
  @font-face
  {
  font-family: courier;
  src: url(/courier_new-webfont.ttf);
  src: url(/courier_new-webfont.eot);
  src: url(/courier_new-webfont.woff);
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="page"&gt;&lt;!--Whole page container--&gt;
  &lt;div id="sidebar"&gt;&lt;!--Side bar container--&gt;
      &lt;div class="link" id="logo"&gt;&lt;img id="logoimg" src="/Images/logo.png"&gt;&lt;/div&gt;
      &lt;div class="link" id="homelink"&gt;Home&lt;!--Home link--&gt;&lt;/div&gt;
      &lt;div class="link" id="aboutlink"&gt;About&lt;!--About link--&gt;&lt;/div&gt;
      &lt;div class="link" id="gallerylink"&gt;Gallery&lt;!--Gallery link--&gt;&lt;/div&gt;
      &lt;div class="link" id="priceslink"&gt;Prices&lt;!--Prices link--&gt;&lt;/div&gt;
      &lt;div class="link" id="reviewslink"&gt;Reviews&lt;!--Reviews link--&gt;&lt;/div&gt;
      &lt;div class="link" id="contactlink"&gt;Contact&lt;!--Contact link--&gt;&lt;/div&gt;
      &lt;div class="link" id="clientslink"&gt;Clients&lt;!--Clients link--&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="slideshow"&gt;&lt;img id="mainimg" src="/Images/main.jpg"&gt;&lt;!--Image slideshow container--&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any help with this would be really appreciated and don't hesitate to point out any massively amateur mistakes. I'm willing to take any criticism and learn from it. Thanks</p>