У меня есть w3.css card и в нем header, main и footer.Я хочу, чтобы main - с background-image - вел себя как w3-rest в столбцах строки w3.css fluid-grid, заполняя всю ширину.Другими словами, я хочу, чтобы он растягивал и удерживал всю область, доступную между верхним и нижним колонтитулами, ВЕРТИКАЛЬНО, заполняя всю ВЫСОТУ.
См., Например, мой код здесь: 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>
Я хочу, чтобы весь раздел main показывал все строки, чтобы фоновое изображение полностью отображалось.
Как мне сделать это с w3.css?Или в HTML5 есть семантический тег для такого поведения?
Или я должен оформить его вручную в стиле с display: flex; flex-direction: column; (как в ответе здесь Как создать div, чтобы заполнить все пространство между верхним и нижним колонтитулами div , который не работает ни в коем случае...)?