html - 难以在 Bootstrap 3 中创建 CSS 垂直网格

Question

正在研究我的期末元素的学生。

我正在使用 Bootstrap 3 并尝试构建一个与下图结构类似的网格:

到目前为止，我只成功地使网格水平跨度 %100。

您可以 view我的元素，看看我做了什么。

我曾尝试创建以下类，但由于一些古怪的效果，我已经在我的 CSS 中将其注释掉，并删除了 body 定位。

body {
    position: relative;
}
.fluid-height {
    height: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
} 

Answer 1

您可以尝试将 100vh 的高度设置为您的流体高度 div:

.fluid-height { height:100vh }

您还可以将 vh 与顶部网格一起使用，并将其全部等于 100:

.buffer-p { height:10vh; }
.fluid-height { height:90vh; }

我不知道你的要求，虽然 vh 有一些 caveats此时使用它是相当安全的。如果您关心支持并且您的类(class)已经进入 Javascript 领域，您可以随时设置快速回退，如 this post 中的答案中所述。 .