How do I make a Bootstrap grid column be the full height of the page?
Question
I am trying to make a sidebar using the Bootstrap Grid but I want it to stretch all the way to the bottom. Image of what I am trying to accomplish.
I don't want to ruin the responsiveness and avoid Javascript solutions if possible.
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. 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.
4 answers
solution1
1 2017-01-26 07:56:44
I have two option to go forward with:
If you like to have sidebar with grid then use
.container-tablewithin flex layout using bootstrap-essentials : jsfiddle.net/grvpanchal/1k1wdu8uIf you want to have a responsive sidebar
.navmenulike use this one: jsfiddle.net/grvpanchal/g6kxjxuo
solution2
0 ACCPTED 2017-01-30 01:18:16
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".
Here is the working solution on JSFiddle: click me.
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.
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"). 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. If this was col-lg-3 then the 992px should be 1200px. All these sizes are from the Bootstrap documentation . 50px and 60px is the size of the navbar and footer.
Please comment if you think I have done something wrong.
solution3
-1 2017-01-24 23:31:39
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. 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
solution4
-1 2017-01-24 23:44:08
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.