使列填充布尔玛的垂直空间？

Question

我具有以下简单布局（除了textarea在运行时成为代码镜像）：

<div class="columns">
    <div class="column is-paddingless" style="background: indigo;">
            <textarea id="code-editor"></textarea>
    </div>
    <div class="column">
    </div>
</div>

问题是-第一列未填充页面的垂直空间（在标签下方）-而是仅包裹了textarea的高度。例如：

有没有一种方法可以使专栏填满整个页面？

Answer 1

Flexbox应该适合您！供您参考，我喜欢本指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

这样设置.columns应该可以解决问题：

.columns {
    display: flex;
    flex-direction: row; // this is default
    align-items: stretch; // this will stretch the children vertically
}

不确定.column的样式（即身高：100％）如何，但是如果这不起作用，请告诉我，我可以进一步解决。

Answer 2

提供一个类或id或只是编写内联样式并执行

 min-height : XXvh;

您在哪里需要xx的VH。

根据MOzila devaloper h 等于视口初始包含块的高度的1％。

---