title: CSS: Make sure footer at the bottom of the page and inside the shadow
body: <p>I have written webpages like below structure and all the contents are inside <code>&lt;div id="wrapper"&gt;</code>.</p>
  
  <p><strong>Problem 1:</strong> If the webpage is only few lines (or shorter than the vertical resolution) How can I make sure the left/right-shadow can be appear from top to bottom?</p>
  
  <p><strong>Problem 2:</strong> If the webpage is only few lines, how can I place the footer at the bottom of the page and inside the left/right-shadow?</p>
  
  <p>It is appreciated if only CSS be changed. THX~</p>
  
  <p>From this<img src="https://i.stack.imgur.com/l08sN.jpg" alt="enter image description here"> to this<img src="https://i.stack.imgur.com/hgTHH.jpg" alt="enter image description here"></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  body {
      margin:0px;
      padding:0px;
  }
  #mainWrapper {
      width:980px;
      margin:0 auto;
      box-shadow:0 0 10px #999;
  }
  #wrapper {
      width:960px;
      margin:0px auto 0px auto;
      padding:0px 0px 10px 0px;
      background:#fff;
  }
  #pageFooter {
      position:fixed;
      left:0px;
      bottom:0px;
      height:30px;
      width:100%;
      background:#999;
  }
  &lt;/style&gt;
  &lt;/head&gt;    
  &lt;body&gt;
  &lt;div id="mainWrapper"&gt;
      &lt;div id="wrapper"&gt;
          ContentContentContent
          &lt;div id="pageFooter"&gt;
              FooterFooterFooter
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>