是否让列填充Bulma中的垂直空间？

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
}

Answer 2

给出一个类或id，或者直接编写内联样式

 min-height : XXvh;

其中xx是你所需要的VH。

根据MOzila devaloper，vh等于视口的初始包含块高度的1%。