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

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 vh 等于视口初始包含块高度的 1%。

---