title: Use HTML5 to make a page with no scrolling
body: <p>I want my page to be displayed in full without the need (or ability) to scroll down. I want to have a footer that will display at the bottom of the screen. I've found so many answers on here and Google that will probably work, but I am a noob and can't make too much sense of them or how to apply the information to my code.</p>
  
  <p>here is my STYLE code:</p>
  
  <pre><code>&lt;style&gt;
      @font-face {
          font-family: 'gooddogregular';
          src: url(GoodDog.otf)
      }
  
      html {
          text-align: center;
          font-family: sans-serif;
      }
      body {
          width: 100%;
          height: 50%;
          margin: 0 auto 0 auto;
          text-align: left;
          background-image: url("border.png");
          background-repeat: no-repeat;
          background-size:cover;
      }
      header {
          width: 100%;
          display: table;
      }
      nav {
          width: 950px;
          border: 2px;
      }
      article {
          width: 700px;
          display: table;
          font-family: gooddogregular;
      }
      h1 {
          font-family: gooddogregular;
          font-size: 50px;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>My body tag is just a body tag, nothing added to it or anything. Essentially I want the page to not scroll, and all content just rest in the middle (or middle left and middle right).</p>
  
  <p>Maybe a better question would be how do I position elements such as footer, images, articles etc with precision? Anyway to use coordinates that are not based on pixel, such as percent?</p>
  
  <p>I tried adding <code>height:</code> to my body style, but no matter what I set the height, it has zero effect.</p>