Bootstrap 2列3方形布局不填满页面答案

【问题标题】：Bootstrap 2 column 3 square layout doesn't fill pageBootstrap 2列3方形布局不填满页面
【发布时间】：2016-09-08 22:24:56
【问题描述】：

我在让引导布局填满整个页面时遇到了一些问题。这是我目前拥有的 jsbin：http://jsbin.com/tibusakuci/edit?html,css,output

我无法让网格填满整个页面。我希望它看起来像这样（填满整个屏幕）：

它在移动屏幕上看起来像这样：

有没有人知道为什么当我取出最小高度时我的代码不会填满整个屏幕？使用引导程序。使用 height: 100% 也不起作用。

*目前盒子只占屏幕的一半

谢谢！

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

更新：以下代码将解决您的排水沟问题。但看起来您的主要问题是流体容器没有填满整个页面。

原因/解决方案： 根据这个 github 问题 - Fluid Layout with 100% height #1671 - 没有“开箱即用”的解决方案。尝试在该问题线程中实现少数解决方案之一（使用 jsfiddle 代码）。

以前的答案（部分过时）

工作的jsbin：http://jsbin.com/rilihit/1/edit?html,css,output

步骤

从.row > div 和.sidebar-bottom 中删除margin-bottom 声明。
在您的自定义 css 文件中声明此 css 以删除默认引导列装订线。此代码具有响应性，适用于所有列大小

.no-gutter > [class*='col-'] { padding-right:0; padding-left:0; }

最后，在您的 HTML 中，像这样将 no-gutter 添加到 rows。

这是完整的 HTML 和 CSS 代码。我修改了您的 jsbin 代码并对其进行了测试。（我制作了sidebar-bottom 的min-height = 160px;，以便2 的min-height 值加起来content 的min-height 值，并在桌面视图中很好地排列。）

.row > div {
  background-color: green;
}
.header,
.footer {
  background: blue;
}
.content {
  background: pink;
  min-height: 300px;
}
.sidebar-top {
  min-height: 140px;
  background: yellow;
}
.sidebar-bottom {
  min-height: 160px;
  background: lightblue;
}
.no-gutter > [class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="../../favicon.ico">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />


  <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

</head>

<body>
  <div class="container-fluid">
    <div class="row no-gutter">
      <div class="col-sm-7">
        <div class="content"></div>
      </div>
      <div class="col-sm-5">
        <div class="row no-gutter">
          <div class="col-sm-12">
            <div class="sidebar-top"></div>
          </div>
        </div>
        <div class="row no-gutter">
          <div class="col-sm-12">
            <div class="sidebar-bottom"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

【讨论】：

感谢您的帮助和详细回复！也许我应该更清楚（我编辑了问题），我无法让三个方块填满整个屏幕。现在，它们只使用硬编码的高度值缩小到屏幕的一半。我正在尝试使它们的高度达到屏幕的 100%。有任何想法吗？谢谢！

【解决方案2】：

从container-fluid 和col-* 中删除填充。您可以将vh 用于全高度，并在较小的屏幕上相应调整为 33% 的高度。

.content {
  background: pink;
  min-height: 100vh;
}
.sidebar-top{
  min-height: 50vh;
  background: yellow;
}
.sidebar-bottom{
  min-height: 50vh;
  background: lightblue;
}

@media (max-width: 768px) {
    .content,
    .sidebar-top,
    .sidebar-bottom {
      min-height: 33vh;
    }
}

.row.no-gutter {
  margin-right:0;
  margin-left:0;
}
.row.no-gutter > [class*='col-'],
.container-fluid {
  padding-right:0;
  padding-left:0;
}

工作演示： http://www.codeply.com/go/r3Rdffxi7A

【讨论】：

【解决方案3】：

去掉周围的padding和margin，去掉负的左右移位。

【讨论】：