title: Fill screen horizontal and vertical with padding
body: <p>I'm tearing my hair apart here. Does anyone know how i can get a div to fill the screen both horizontal and vertical? I can make it fill it horizontal but it just refuses to fill vertical unless a specify the width in pixels. What am I doing wrong?</p>
  
  <p>This is what I want to accomplish, without have to scroll to get the bottom-padding:</p>
  
  <p><img src="https://i.stack.imgur.com/11t4Z.jpg" alt="a full width and height div with padding on all sides"></p>
  
  <p>Thank you!</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="main"&gt;
      &lt;div class="main_content"&gt;&lt;/div&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#main {
  margin-left:auto;
  margin-right:auto;
  height:100%;
  width:auto;
  padding-left:40px;
  padding-right:40px;
  padding-top:40px;
  padding-bottom:40px;
  }
  
  .main_content {
  width:auto;
  height:100%;
  background:#fff;    
  }
  </code></pre>