我正在尝试使用 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 上找到这可能会更容易使用。 确保你拖动结果，这样网站就不会显示列在彼此下方的移动版本。
感谢任何帮助，因为我多年来一直坚持这个问题。
最佳答案
我有两个选择:
如果你喜欢带有网格的侧边栏，那么在 flex 布局中使用
.container-table使用 bootstrap-essentials : jsfiddle.net/grvpanchal/1k1wdu8u如果你想要一个响应式侧边栏
.navmenu就像使用这个:jsfiddle.net/grvpanchal/g6kxjxuo
关于javascript - 如何使 Bootstrap 网格列成为页面的全高？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41840753/