title: CSS stretch div vertically to fill remaining container
body: <p>It seems so simple, but I wrap my mind about it and googled a lot but couldn't find an answer: </p>
  
  <p>Container with two vertical rows, one has height defined in pixels (header), and the other has image that should stretch as much as remaining height (slider div). The problem is that this height of header is dynamic (as in unknown) and we can't use that value in defining CSS of container or slider div.</p>
  
  <p>How do I solve it without javascript?</p>
  
  <pre><code>&lt;section&gt;
    &lt;header style="height:40px; background: yellow;"&gt;header&lt;/header&gt;
    &lt;div id="slider"&gt;  
          &lt;img src="http://amanita-design.net/img/home-news/botanicula.jpg" /&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  
  
      section {
        position: absolute;         
        top: 0; 
        left: 0;
        height: 100%;
        width: 400px;
        background: green;
      }
      #slider {
        height: 100%; /* this is wrong; how to set height to stretch element? */
      }
      img {
        width: 100%;
        height: 100%;
      }
  </code></pre>
  
  <p>Header is set to 40px just for the sake of the example. It could be any other value, but the CSS definition of other elements shouldn't be aware of that, because it's dynamically loaded 3rd party component with inline CSS.
  Also, slider div is a complex slider (Swiper) that renders code with bunch of nested divs but I need to use exactly that one. </p>
  
  <p>But this DOM structure should be rough sketch of my case.</p>
  
  <p>Example is here: <a href="https://jsfiddle.net/snaokLxd/3/" rel="nofollow noreferrer">https://jsfiddle.net/snaokLxd/3/</a></p>