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

Question

学生正在完成我的最终项目。

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

到目前为止，我只是成功地使网格横向移动了100％。

你可以view我的项目，看看我做了什么。

我尝试创建以下类，但由于一些严重的影响并删除了正文定位，因此在我的CSS中对其进行了评论。

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，但此时使用它是相当安全的。如果您担心支持并且您的课程已经进入Javascript领域，您可以随时设置快速回退，如this post中的答案所述。

Answer 2

你可以通过向你的第一个和最后一个row提供高度来实现这一点。您可以使用vh作为此Fiddle中列出的高度。

您可以为row使用静态高度，但它不会响应。如果您使用％，那么您必须设置html, body { min-height 100%; }，但是当添加内容并且页面增长时，row的高度会发生变化。

Answer 3

您可以对两个类使用绝对值，并为每个类提供顶部和底部0px。根据您的设计，我做了一些调整。

.bg-black {
  background: #000000;
  position: absolute;
  bottom: 0px;
  top: 269px;
}
    .bg-white {
  background: #FFFFFF;
  left: 25%;
  position: absolute;
  top: 269px;
  bottom: 0px;
}