title: How to make the child fit 100% of parent height with fixed view?
body: <p>I have a div that has a fixed height of 20cm. Now, the inner page needs to have padding and position absolute needs to respect that padding.</p>
  
  <p>How can I make the red box fill always what's left? The position absolute item needs to be always at the bottom no matter what. </p>
  
  <p>It needs to have one class, and not 10classes with 10different heights like 58%, 45% etc...</p>
  
  <p>If you check the codepen: <a href="https://codepen.io/Aurelian/pen/MqxvgW" rel="nofollow noreferrer">https://codepen.io/Aurelian/pen/MqxvgW</a></p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;div class="page"&gt;
  
     &lt;div class="image"&gt;&lt;/div&gt;
  
     &lt;div class="page-inner-default"&gt;
        &lt;p&gt;hello&lt;/p&gt;
        &lt;span class="pos-bot"&gt;Hi&lt;/span&gt;
     &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class="page"&gt;
  
     &lt;div class="image"&gt;&lt;/div&gt;
  
     &lt;h1&gt;Heading&lt;/h1&gt;
  
     &lt;div class="page-inner-default"&gt;
        &lt;p&gt;hello&lt;/p&gt;
       &lt;span class="pos-bot"&gt;Hi&lt;/span&gt;
     &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the CSS:</p>
  
  <pre><code>*, *:before, *:after {
    box-sizing: border-box;
  }
  
  body {
     background: grey;
     box-sizing: border-box;
  }
  
  .image {
     height: 250px;
     border: 1px solid green;
     background: green;;
  }
  
  .pos-bot {
     position: absolute;
     bottom: 0;
  }
  
  .page {
     height: 20cm;
     background-color: white;
     width: 16cm;
     margin: 50px auto;
     display: inline-block;
     vertical-align: top;
     position: relative;
  }
  
  .page-inner-default {
     position: relative;
     padding: 50px;
     height: 100%;
        border: 1px solid red;
  }
  
  .image {
  
  }
  </code></pre>