Zac*_*000 7 html javascript css jquery twitter-bootstrap
我正在尝试使用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上使用,这可能会更容易使用.确保拖动结果,以便网站不会显示彼此相邻的列的移动版本.
任何帮助都表示赞赏,因为我多年来一直坚持这个问题.
我想出了一个相当简单的解决方案。感谢所有回复并提供帮助的人。感谢 Gerardo Sabetta 建议使用“height: 100vh”。
这是 JSFiddle 上的工作解决方案：点击我。
我做了什么
使用 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 的中等桌面大小，并且是由于 col-md-3 导致列堆叠时（当窗口大小小于 992px 时）。如果这是 col-lg-3 那么 992px 应该是 1200px。所有这些大小都来自Bootstrap 文档。50px 和 60px 是导航栏和页脚的大小。
如果您认为我做错了什么，请评论。