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

Question

I am trying to make a sidebar using the Bootstrap Grid but I want it to stretch all the way to the bottom. 我正在尝试使用Bootstrap Grid制作侧边栏，但我希望它一直延伸到底部。 Image of what I am trying to accomplish. 我想要完成的图像。

I don't want to ruin the responsiveness and avoid Javascript solutions if possible. 如果可能的话，我不想破坏响应能力并避免使用Javascript解决方案。

Code: 码：

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

The code is also avaliable on jsfiddle.net which will probably be a lot easier to work with. 代码也可以在jsfiddle.net上使用，这可能会更容易使用。 Make sure you drag the results so that the site does not show a mobile version with columns underneath each other. 确保拖动结果，以便网站不会显示彼此相邻的列的移动版本。

Any help is appreciated as I have been stuck on this problem for ages. 任何帮助都表示赞赏，因为我多年来一直坚持这个问题。

Answer 1

I have two option to go forward with: 我有两个选择：

If you like to have sidebar with grid then use .container-table within flex layout using bootstrap-essentials : jsfiddle.net/grvpanchal/1k1wdu8u 如果你想使用网格侧边栏，那么使用bootstrap-essentials在flex布局中使用.container-table ： jsfiddle.net/grvpanchal/1k1wdu8u
If you want to have a responsive sidebar .navmenu like use this one: jsfiddle.net/grvpanchal/g6kxjxuo 如果你想有一个响应边栏.navmenu喜欢使用这个： jsfiddle.net/grvpanchal/g6kxjxuo

Answer 2

I figured out a fairly simple solution. 我想出了一个相当简单的解决方案。 Thanks to everyone who responded to help though. 感谢所有回应帮助的人。 Credits to Gerardo Sabetta for the suggestion to use "height: 100vh". Gerardo Sabetta建议使用“身高：100vh”。

Here is the working solution on JSFiddle: click me. 这是JSFiddle的工作解决方案：点击我。

What I did 我做了什么

Using the calc function and position absolute I could make the sidebar fill up the height of the page without making a scrollbar unnecessarily and keep it responsive using @media in CSS. 使用calc函数和position绝对位置我可以使侧边栏填满页面的高度，而不必不必要地使用滚动条并使用CSS中的@media保持响应。

The code I added 我添加的代码

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

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

with "sidebar-grid" being in the class of the grid (IE. "col-md-3 sidebar-grid"). “sidebar-grid”位于网格类中（IE。“col-md-3 sidebar-grid”）。 992px is the medium desktop size for Bootstrap and is when the columns stack (when the window is less the 992px in size) due to col-md-3. 992px是Bootstrap的中等桌面大小，当列堆叠时（当窗口大小小于992px时）由于col-md-3。 If this was col-lg-3 then the 992px should be 1200px. 如果这是col-lg-3那么992px应该是1200px。 All these sizes are from the Bootstrap documentation . 所有这些尺寸都来自Bootstrap文档。 50px and 60px is the size of the navbar and footer. 50px和60px是导航栏和页脚的大小。

Please comment if you think I have done something wrong. 如果您认为我做错了，请评论。

Answer 3

well...there are some things in your code that won't let side bar grow by css only... first side-bar and nav-bar are inside a row and a container that close them in one div that close them as a box or something...so...even if you give your sidebar height:100% it won't effect anything... seconed your footer is 100% width and also declare a specific height for it so again it won't help you to write height 100% for the side bar. 嗯...你的代码中有一些东西不会让侧栏通过css增长...第一个侧栏和导航栏在一行内，一个容器在一个div中关闭它们将它们关闭为一个盒子或者什么东西......所以...即使你给你的侧边栏高度：100％它也不会影响任何东西...你的页脚是100％宽度并且还声明了它的特定高度所以它再次获胜t帮助你为侧栏写高度100％。 I really advise you to use JS for the sidebar, there are also many examples for a complete one in bootstrap comment me if you'd like a link for an example or something 我真的建议你在侧边栏上使用JS，如果你想要一个示例或某事的链接，那么在bootstrap中也有很多完整的例子给我发表评论

Answer 4

What I did was take the sidebar out of the main row and floated it right. 我所做的是将侧边栏从主排中取出并向右浮动。 I also set the footer position to relative. 我还将页脚位置设置为相对位置。

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

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

问题描述

4 个解决方案

解决方案1
1 2017-01-26 07:56:44

解决方案2
0 已采纳 2017-01-30 01:18:16

解决方案3
-1 2017-01-24 23:31:39

解决方案4
-1 2017-01-24 23:44:08

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

问题描述

4 个解决方案

解决方案1 1 2017-01-26 07:56:44

解决方案2 0 已采纳 2017-01-30 01:18:16

解决方案3 -1 2017-01-24 23:31:39

解决方案4 -1 2017-01-24 23:44:08

解决方案1
1 2017-01-26 07:56:44

解决方案2
0 已采纳 2017-01-30 01:18:16

解决方案3
-1 2017-01-24 23:31:39

解决方案4
-1 2017-01-24 23:44:08