如何使 Bootstrap 网格列成为页面的全高？答案

【问题标题】：How do I make a Bootstrap grid column be the full height of the page?如何使 Bootstrap 网格列成为页面的全高？
【发布时间】：2017-01-30 09:18:16
【问题描述】：

我正在尝试使用 Bootstrap Grid 制作一个侧边栏，但我希望它一直延伸到底部。 Image of what I am trying to accomplish.

我不想破坏响应能力并尽可能避免使用 Javascript 解决方案。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* Footer CSS */
        html {
            position: relative;
            min-height: 100%;
        }
        body {
            margin-bottom: 60px;
        }
        .footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 60px;
            background-color: #3e8f3e;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-10" style="background-color: #f5e79e">
                Column that does not need to stretch
            </div>
            <div class="col-md-2" style="background-color: #ffff00;">
                Sidebar/column to stretch down to the bottom (to the footer)
            </div>
        </div>
    </div>

    <footer class="footer">
        <div class="container-fluid">
            <h5>Footer to reach down too</h5>
        </div>
    </footer>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

代码也可以在jsfiddle.net 上使用，这可能会更容易使用。确保您拖动结果，以便该站点不会显示移动版本，其中列在彼此下方。

感谢任何帮助，因为我多年来一直被这个问题困扰。

【问题讨论】：

@RayKoren 我没有否决你的答案。
你的侧边栏是导航菜单吗？
@Zacy5000 我有两个选择：jsfiddle.net/grvpanchal/1k1wdu8u 和 jsfiddle.net/grvpanchal/g6kxjxuo
嘿，你有没有尝试在侧边栏类中添加“height:100vh”？它就像一个魅力，让我知道这是否有帮助！
@GerardoSabetta 其实你的建议很有帮助。我不知道 vh 并设法使用 CSS 的 calc 函数来阻止滚动条发生。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

我有两个选择：

如果您喜欢带有网格的侧边栏，请在使用 bootstrap-essentials 的 flex 布局中使用 .container-table ：jsfiddle.net/grvpanchal/1k1wdu8u
如果你想有一个响应式侧边栏.navmenu 喜欢使用这个：jsfiddle.net/grvpanchal/g6kxjxuo

【讨论】：

【解决方案2】：

我想出了一个相当简单的解决方案。感谢所有响应帮助的人。感谢 Gerardo Sabetta 提出的使用“height: 100vh”的建议。

这是 JSFiddle 上的工作解决方案：click me.

我做了什么

使用 calc 函数和绝对位置，我可以使侧边栏填满页面的高度，而无需制作滚动条，并使用 CSS 中的 @media 使其保持响应。

我添加的代码

@media (max-width: 992px) {
    .sidebar-grid {
        position: relative;
    }
}

@media (min-width: 992px) {
    .sidebar-grid {
        height: calc(100% - 50px - 60px);
        position: absolute;
        right: 0;
    }
}

“sidebar-grid”属于网格类（即“col-md-3 sidebar-grid”）。 992px 是 Bootstrap 的中等桌面大小，并且是当列堆叠时（当窗口小于 992px 大小时），由于 col-md-3。如果这是 col-lg-3，那么 992px 应该是 1200px。所有这些尺寸均来自the Bootstrap documentation。 50px 和 60px 是导航栏和页脚的大小。

如果您认为我做错了什么，请发表评论。

【讨论】：

很高兴为您提供帮助！

【解决方案3】：

嗯...您的代码中有一些内容不会让侧边栏仅由 css 增长... 第一个侧边栏和导航栏位于一排和一个容器内影响什么... 其次，您的页脚是 100% 宽度，并且还为其声明了一个特定的高度，因此它不会帮助您为侧栏写 100% 的高度。我真的建议您使用 JS 作为侧边栏，如果您需要示例链接或其他内容，请在引导程序中评论我的完整示例

【讨论】：

【解决方案4】：

我所做的是将侧边栏从主行中取出并向右浮动。我还将页脚位置设置为相对。

        /* Footer CSS */
        html {
            position: relative;
            min-height: 100%;
        }
        body {
            margin-bottom: 60px;
        }
        .footer {
            position: relative;
            bottom: 0;
            width: 100%;
            height: 60px;
            background-color: #bce8f1;
        }
        body,html,.row-offcanvas {
  height:100%;
}

body {
  padding-top: 50px;
}

#sidebar {
  width: inherit;
  min-width: 220px;
  max-width: 220px;
  background-color:#f5f5f5;
  float: right;
  height:100%;
  position:relative;
  overflow-y:hidden;
  overflow-x:hidden;
}
#main {
 
  overflow:auto;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">NavBar</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
    
    <div class="container-fluid">
 <div id="sidebar" class="col-md-2" style="background-color: #ffff00;">
                 <div class="col-md-12">
        <h3>Sidebar</h3>
        <ul class="nav nav-pills nav-stacked">
          <li class="active"><a href="#">Section</a></li>
          <li><a href="#">Section</a></li>
          <li><a href="#">Section</a></li>
          <li><a href="#">Section</a></li>
          <li><a href="#">Section</a></li>
          <li><a href="#">Section</a></li>
          <li><a href="#">Section</a></li>
          <li><a href="#">Section</a></li>
          <li><a href="#">Section</a></li>
          <li><a href="#">Section</a></li>
        </ul>
      </div>
            </div>
        <div id="main" class="row">
            <div class="col-md-10" style="background-color: #f5e79e">
                Column that does not need to stretch
            </div>
           
        </div>
    </div>

    <footer class="footer">
        <div class="container-fluid">
            <h5>Footer to reach down too</h5>
        </div>
    </footer>

【讨论】：

这很好，但问题是如果用户在手机（或小窗口）上，侧边栏将不会响应（IE。它不会堆叠在列下），这是一个问题，因为在电话上它都会被塞满。不过还是谢谢