html - Bootstrap CSS 专栏

Question

我正在为一个页面开发一个快速 UI，但我仍处于早期阶段。

有一件事我正在尝试做，但不太明白。

在所附的屏幕截图中，我想要一个全高的列，其背景颜色为纯色，从 HR 到左侧的 footer。

我用页面的基本渲染创建了一个 fiddle 。

fiddle :https://jsfiddle.net/unovgp8b/

我尝试在左列中添加一个类并将其高度设置为 100%，但从未奏效。我的目标是此列(纯色背景)始终为 100% 高度，以了解填充面板详细信息时右侧的内容将如何向下插入页面。

有什么简单的方法可以使用 bootstrap 制作 100% 高度的列吗？

Answer 1

我认为您正在寻找等高的列。有很多方法可以做到这一点，一种是将外部容器设置为 overflow: hidden，然后将其添加到左列:

margin-bottom: -99999px;
padding-bottom: 99999px;

这里有更多例子:https://css-tricks.com/fluid-width-equal-height-columns/

fiddle :https://jsfiddle.net/h3no8jww/1/