Question

我正在尝试使用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，这可能会更容易使用。确保拖动结果，以便网站不会显示彼此相邻的列的移动版本。

任何帮助都表示赞赏，因为我多年来一直坚持这个问题。

Answer 1

我有两个选择：

如果您希望使用网格侧边栏，请使用bootstrap-essentials在弹性布局中使用.container-table：jsfiddle.net/grvpanchal/1k1wdu8u
如果您希望使用响应边栏.navmenu，请使用此标题：jsfiddle.net/grvpanchal/g6kxjxuo

Answer 2

我找到了一个相当简单的解决方案。感谢所有回应帮助的人。致Gerardo Sabetta的建议使用＆＃34;身高：100vh＆＃34;。

以下是JSFiddle的工作解决方案：click me.

我做了什么

使用calc函数和position绝对位置我可以使侧边栏填满页面的高度，而不会不必要地使用滚动条，并使用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;
    }
}

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

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

Answer 3

嗯......你的代码中有些东西不会让cbar只能通过css增长... 第一个侧边栏和导航栏位于一排，一个容器将它们关闭在一个div中，将它们作为一个盒子或其他东西关闭......所以...即使你给你的侧边栏高度：100％它赢了＆＃39 ;影响任何事情...... seconed你的页脚是100％宽度，并声明一个特定的高度，所以再次它不会帮助你写侧栏的高度100％。我真的建议你在侧边栏上使用JS，如果你想要一个例子或某事的链接，那么在bootstrap中有很多完整的例子可以评论我

Answer 4

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

＆＃13;

        /* 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;
}

＆＃13;

<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>

＆＃13;

如何使Bootstrap网格列成为页面的整个高度？

4 个答案: