title: Div height without content
body: <p><img src="https://i.stack.imgur.com/aPYmY.jpg" alt="enter image description here"></p>
  
  <p>Hi,</p>
  
  <p>I'm really don't know how I can fix this isse because I've some pages without any content but the structure of the template leaves the rest of the page blank.</p>
  
  <p>I've tried to apply some different techniques with css or jquery and I couldn't find a solution. Could some one help me?</p>
  
  <p>this is the code for the moment:</p>
  
  <pre><code>html {
  height: 100%;
  }
  
  body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-size: 12px;
  font-family: 'Tahoma' sans-serif;
  color: #1c1c1c;
  }
  
  #wrapper {
  min-height: 100%;
  }
  
  
  /* Header  */
  
  header {
  
  width:100%;
  background:#454545;
   height: 100%;
  
  }
  
  #main {  
  overflow:hidden;
  }
  
  
   .content {
  width:86%;
      height: 100%;
  padding:10px;
  margin-left:5px;
  float:left;
  background:#FFF;
  
  
  }  
  
   .sidebar {  
  padding:1px;
  width:12%;
  background:#FF8500; 
  float:left;
  padding-bottom: 30000px;
      margin-bottom: -30000px;
  
  }
  
  footer {
  clear: both;
  position: relative;
  z-index: 10;
  height: 3em;
  margin-top: -3em;
  padding:10px;
  background:#000;
  text-align:right;
  color:#FFF; 
  }
  </code></pre>
  
  <p>I share the html: <a href="http://jsfiddle.net/7r2SG/2/" rel="nofollow noreferrer">http://jsfiddle.net/7r2SG/2/</a></p>