html - 在 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
}

不确定您如何设置 .column 样式(即高度:100%)，但如果这不起作用，请告诉我，我可以进一步解决问题。