Question

我有一个w3.css card，其中有一个header，main和footer。我希望main（具有background-image）在w3.css w3-rest的一行的列中的行为像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;样式设置样式（如此处的回答How to create div to fill all space between header and footer div，无论如何都不起作用...）？

w3.css即使没有内容也如何用背景图像填充主行

0 个答案: