title: w3.css how to fill main row with background image even if no content
body: <p>I have a w3.css <code>card</code> and in it a <code>header</code>, <code>main</code>, and <code>footer</code>. I want the <code>main</code> - which has a <code>background-image</code> - to behave like <code>w3-rest</code> in the columns of a row of the w3.css <code>fluid-grid</code>, filling in all the width. In other words, I want it to stretch and hold the whole area available between the header and footer VERTICALLY, filling in all the HEIGHT.</p>
  
  <p>See for example my code here:<a href="http://jsfiddle.net/pashute/qnj1ptu2/" rel="nofollow noreferrer">http://jsfiddle.net/pashute/qnj1ptu2/</a></p>
  
  <pre><code>&lt;section id="section--theme-results" class="w3-card-4"&gt;
    &lt;header class="w3-theme"&gt;&lt;h4&gt;Theme results&lt;/h4&gt;&lt;/header&gt;
    &lt;main id="secphone" 
          class="w3-card-4" 
          style="background-size: cover; 
                 background-image: url('images/cellphone.png');"&gt;
      it is only showing a few lines of text&lt;br&gt;
      but I want it to span the whole height &lt;br&gt;
      and show the background phone image inside&lt;br&gt;
      I should not have to fill this with content&lt;br&gt; 
      and I want the whole bg image to show. 
    &lt;/main&gt;
    &lt;footer&gt;The end&lt;/footer&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>I want the whole <code>main</code> section to show all the rows so that the background image is totally shown. </p>
  
  <p>How do I do so with w3.css? Or is there a semantic tag in HTML5 for such behavior? </p>
  
  <p>Or must I style it manually in the style with <code>display: flex; flex-direction: column;</code> (as in answer here <a href="https://stackoverflow.com/questions/206652/how-to-create-div-to-fill-all-space-between-header-and-footer-div">How to create div to fill all space between header and footer div</a> which is not working in any case...) ?</p>