在这个引导模板中，侧边栏是如何粘在页面底部的？答案

【问题标题】：how is the sidebar sticking to the bottom of the page in this bootstrap template?在这个引导模板中，侧边栏是如何粘在页面底部的？
【发布时间】：2015-11-10 17:29:37
【问题描述】：

我真的不明白他们是如何让这个侧边栏粘在这个引导模板中的页面底部的。

http://getbootstrap.com/examples/dashboard/#

如果你查看 .sidebar 类的 CSS 属性，就会发现这个很奇怪

position: fixed; top: 51px; bottom: 0px;

但对于列的高度确实没有规定，而且由于它应该自动调整到内容的高度，所以我在这里有点迷失了。

我用这个 CodePen 做了一次尝试：

http://codepen.io/anon/pen/ojQvjj

但实际上，我发现让侧边栏固定在底部的唯一方法是添加一个 height 属性。

非常感谢您的回答，这真的会帮助我在 CSS 方面取得进步。

【问题讨论】：

这只是你拥有的 CSS。固定位置、最高值和最低值的组合。这是您更新的笔：codepen.io/anon/pen/VvVZbm
这很奇怪，因为我在询问之前当然尝试过这个 CSS，但是当我添加底部：0 属性时，它一直拖着 div 向下。虽然这是奇怪的行为

标签： html css twitter-bootstrap

【解决方案1】：

如果您使用position: fixed; + top: 0; bottom: 0; 创建容器或元素 (.sidebar)，该容器将“粘”在父元素 (body) 的顶部和底部.
当您在引导程序中使用“固定导航栏”时，您需要添加 margin-top > 50px 或在本例中为 top: 51px;，以便侧边栏在导航栏之后开始，并且不会隐藏在其后面。
在某些时候它会溢出，这就是他们添加的原因，overflow-y: hidden or scroll;

为了更清楚。如果您从该元素中删除那些.col-sm-3 .col-md-2，并给.sidebar 一个left: 0; right: 0;，它将占据整个视口区域。

【讨论】：

感谢您的回答。奇怪的是，我尝试了这组属性但它没有正常工作，请参阅我刚刚在顶部发布的评论。这是一个CSS“黑客”还是一个通缉的行为？我的意思是，不应该在 top:0 和 bottom:0 之间存在冲突，从而导致浏览器之间的不一致吗？
这是想要的行为（如果我理解正确的话）。当引导类通过继承父元素的属性来重新制作类似引导的布局时，您必须小心。这就是为什么你在使用它时必须遵循某种嵌套。稍后我会检查您的代码笔。（我正在打电话）
是的，据我所知，在重新制作引导布局时，我必须在最具体的级别进行更改，以免破坏其他元素的继承属性。无论如何感谢您的帮助

【解决方案2】：

在这里，如果您在第一个 div 中看到代码 col-md-2，在第二个 div 中看到 col-md-10 并将第一个 div 设置为 position: fixed; 并且当我们将 div 设置为固定位置时，它不会在视口中获得任何空间。和带有col-md-10 的第二个div 将获得该位置，但它会隐藏在第一个div 的顶部位置之后，因此我们使用.col-md-offset-2 将第二个div 移动到16.66 % 正确的方向和top:0 和bottom:0 用于给予位置一个固定的 div。

任何你想要的东西都在那里：请检查你这个codepen：

http://codepen.io/Gkakar/pen/KdrzBJ

【讨论】：