[英]How do I make a Bootstrap grid column be the full height of the page?
我正在尝试使用Bootstrap Grid制作侧边栏,但我希望它一直延伸到底部。 我想要完成的图像。
如果可能的话,我不想破坏响应能力并避免使用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上使用 ,这可能会更容易使用。 确保拖动结果,以便网站不会显示彼此相邻的列的移动版本。
任何帮助都表示赞赏,因为我多年来一直坚持这个问题。
我有两个选择:
如果你想使用网格侧边栏,那么使用bootstrap-essentials在flex布局中使用.container-table
: jsfiddle.net/grvpanchal/1k1wdu8u
如果你想有一个响应边栏.navmenu
喜欢使用这个: jsfiddle.net/grvpanchal/g6kxjxuo
我想出了一个相当简单的解决方案。 感谢所有回应帮助的人。 Gerardo Sabetta建议使用“身高:100vh”。
这是JSFiddle的工作解决方案: 点击我。
我做了什么
使用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;
}
}
“sidebar-grid”位于网格类中(IE。“col-md-3 sidebar-grid”)。 992px是Bootstrap的中等桌面大小,当列堆叠时(当窗口大小小于992px时)由于col-md-3。 如果这是col-lg-3那么992px应该是1200px。 所有这些尺寸都来自Bootstrap文档 。 50px和60px是导航栏和页脚的大小。
如果您认为我做错了,请评论。
嗯...你的代码中有一些东西不会让侧栏通过css增长...第一个侧栏和导航栏在一行内,一个容器在一个div中关闭它们将它们关闭为一个盒子或者什么东西......所以...即使你给你的侧边栏高度:100%它也不会影响任何东西...你的页脚是100%宽度并且还声明了它的特定高度所以它再次获胜t帮助你为侧栏写高度100%。 我真的建议你在侧边栏上使用JS,如果你想要一个示例或某事的链接,那么在bootstrap中也有很多完整的例子给我发表评论
我所做的是将侧边栏从主排中取出并向右浮动。 我还将页脚位置设置为相对位置。
/* 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.