title: Auto stretch div when it's default height/width is filled
body: <p>my template is as follows:</p>
  
  <p><img src="https://i.stack.imgur.com/hMxRF.png" alt="enter image description here"></p>
  
  <pre><code>.layout{
  
  height:100%;
  width: 70%;
  position: fixed;
  
  }
  
  .header{
  
  height:20%;
  width: 100%;
  
  }
  
  .content{
  
  height:60%;
  width: 100%;
  
  }
  
  .footer{
  
  height:20%;
  width: 100%;
  
  }
  </code></pre>
  
  <p>the <strong>content</strong> has a <strong>default height 60%</strong>, and i want if the <strong>content</strong> is <strong>filled</strong> with data to get <strong>auto stretch</strong> for (height/width) when necessary, and a scroll appears for whole page, how to do so ?</p>
  
  <p>i tried the solution for giving the <strong>parent</strong> <code>postion:relative;</code> but that will ignore the default height and minimize the content in case of the content has small data, and i want to keep default height in case of small data.</p>