背景颜色列填充直到页面底部，甚至页面增长

Question

我正在尝试使列颜色增长直到页面底部而不指定高度，但我在css中遇到麻烦， 这就是我想要做的：

  +-------------------------------------------------+
  |            |        Header                      |
  |            +------------------------------------+
  |            |                                    |
  |            |                                    |
  |Navigation  |         Content                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  +------------|                                    |
  |   footer   |                                    |
  +------------+------------------------------------+

左列高度不符合右列高度。

这就是我使用的：

<div class="container">
   <div class="row>
      <div class="col-md-3">
          <div>
             NAVIGATION GOES HERE
          </div>

          <div class="footer">
             FOOTER
          </div>               
      </div>
      <div class="col-md-9">
          <div class="header">
               HEADER GOES HERE
          </div>
          <div>
             Site Content Goes here
          </div>
      </div>
   </div>
</div>

Answer 1

这里你的标记保持不变。

基本上你需要设置

.row{ display: -webkit-box !important; display: -ms-flexbox !important; display: -webkit-flex !important; display: flex !important; overflow: hidden; }

可以找到完整的工作示例here

如果您有任何疑问，请与我联系！