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

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%），但如果这不起作用，请告诉我，我可以进一步排除故障。