在Bulma中如何让列填充垂直空间？

Question

我有以下简单的布局（除了 textarea 在运行时变成 Code Mirror）:

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

问题在于，第一列不能填充页面的垂直空间（选项卡下方），而只是包裹了textarea的高度。例如：

有没有办法使列填满页面？

- Foobar

---

这个 GitHub 问题可能会有所帮助：https://github.com/jgthms/bulma/issues/860 - Tim

Answer 1

弹性盒子布局对您应该很有用！供您参考，我喜欢这篇指南：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％），但如果此方法不起作用，让我知道，我可以进一步进行故障排除。

- shaunmwa

---

你能分享一下与你的列、列和无填充类相关的样式吗？ - shaunmwa

Answer 2

给一个类或ID，或者直接编写内联样式并执行。

 min-height : XXvh;

xx代表你需要的视窗高度。

根据Mozilla开发者文档，vh等于视窗初始包含块高度的1%。

---

- Mahad Ali

---

除非第二列是固定高度，即使如此，最好也让第一列填充空间而不是硬编码大小。 - matto0