title: CSS Fixed Header, Fluid Content, Fixed Header Responsive Layout
body: <p><b>I am currently working on CSS layout techniques to achieve a layout like below picture</b>
  <img src="https://i.stack.imgur.com/R6PBs.jpg"/></p>
  
  <pre><code>&lt;div id="wrapper"&gt;
  &lt;div id="header"&gt;&lt;/div&gt;
  &lt;div id="content"&gt;&lt;/div&gt;
  &lt;div id="footer"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've tried </p>
  
  <ul>
  <li>fixed poistion </li>
  <li>calc </li>
  <li>absolute position </li>
  </ul>
  
  <p>but I want to know new ways of designing CSS layouts</p>
  
  <p><i>Is there any other way to achieve the layout shown in above picture?</i></p>
  
  <h1>Solved</h1>
  
  <p><b>Edited</b>
  This is what I want</p>
  
  <p><a href="http://jsfiddle.net/danield770/DVAcV/9/" rel="nofollow noreferrer">http://jsfiddle.net/danield770/DVAcV/9/</a></p>