title: Unusual cross-browser error with 'padding' at the bottom of the page
body: <p>I searched on StackOverflow for this but nothing seemed to be exactly the same as this problem. On my website, there is some unexpected 'padding' at the bottom of the page. This padding varies depending on the browser you are using. It's hard to show a decent comparison but here's an image nonetheless:</p>
  
  <p><img src="https://i.stack.imgur.com/O0vdD.png" alt="Browser comparison of footer"></p>
  
  <p>Here's the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
   background-color:blue;
  }
  #main::before{
   width:900px;
   height:113px;
   content: " ";
   position:absolute;
   top:-113px;
   left:0px;
   background-image: url('http://i.stack.imgur.com/7DE7i.png');
   background-repeat: no-repeat;
  }
  #main{
   position: absolute;
   top: 50%;
   left: 50%;
   width:900px;
   margin-top:100px;
   margin-bottom:150px;
   background-image: url('http://i.stack.imgur.com/zZCB2.png'); 
   background-repeat: repeat-y;
   height:80%;
   margin-right: -50%;
   text-align:center;
   transform: translate(-50%, -50%);
  }
  #main::after{
   width:900px;
   height:100px;
   content: " ";
   position:absolute;
   bottom:-100px;
   left:0px;
   background-image: url('http://i.stack.imgur.com/DVJAq.png');
   background-repeat: no-repeat;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div id="main"&gt;&lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm guessing it's to do with the margin/padding/positioning, but as you can tell, that's pretty much the entirety of the code. What is causing this, and how is it fixed? Or are there any alternative ways to format my images and get the same result without the problem?</p>