I have a w3.css card and in it a header, main, and footer. I want the main - which has a background-image - to behave like w3-rest in the columns of a row of the w3.css fluid-grid, 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.
See for example my code here:http://jsfiddle.net/pashute/qnj1ptu2/
<section id="section--theme-results" class="w3-card-4">
<header class="w3-theme"><h4>Theme results</h4></header>
<main id="secphone"
class="w3-card-4"
style="background-size: cover;
background-image: url('images/cellphone.png');">
it is only showing a few lines of text<br>
but I want it to span the whole height <br>
and show the background phone image inside<br>
I should not have to fill this with content<br>
and I want the whole bg image to show.
</main>
<footer>The end</footer>
</section>
I want the whole main section to show all the rows so that the background image is totally shown.
How do I do so with w3.css? Or is there a semantic tag in HTML5 for such behavior?
Or must I style it manually in the style with display: flex; flex-direction: column; (as in answer here How to create div to fill all space between header and footer div which is not working in any case...) ?
