让内容填充剩余的屏幕空间

Question

我正在尝试建立一个具有一些基本功能的网站，该网站目前仅包含导航栏和主要内容区域。我希望这个主要的内容区域能够占据垂直屏幕空间的其余部分，但底部要有少许空白。

我尝试将各种容器的高度设置为100％，但这似乎无效。有人告诉我这是由于父元素没有与之关联的高度（body元素是父元素）。我在SO周围搜索并找到了各种答案，但是我无法成功实现它们。

最值得注意的帖子是：Make a div fill the height of the remaining screen space 我的问题是，我希望有一种解决方案，可以将所有内容都放到总体Flexbox容器中。

以下代码引脚与我当前网站的外观类似：https://codepen.io/anon/pen/LoxpoK?editors=1100

我希望将此部分扩展到页面底部：

<section class="content-block center-content">
        <h1>
            PLACEHOLDER
            <br>
            FOR TEXT, AND
            <br>
            THINGS
        </h1>
</section>