在此引导程序模板中,侧边栏如何粘贴到页面底部?

时间:2015-11-09 20:06:48

标签: html css twitter-bootstrap

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

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

如果你看一下.sidebar类的CSS属性,就有这个奇怪的

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

但是真的没有关于列高度的规则,因为它应该自动调整到内容的高度,我在这里有点迷失。

我尝试使用此CodePen:

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

但实际上,我发现侧边栏贴在底部的唯一方法是添加高度属性。

非常感谢您的答案,这将帮助我在CSS方面取得进展。

2 个答案:

答案 0 :(得分:1)

如果您使用.sidebar + position: fixed;制作容器或元素(top: 0; bottom: 0;),该容器将会“粘贴”。到父元素(body)的顶部底部 当您使用固定导航栏时#39;在bootstrap中,您需要添加margin-top > 50px,或者在这种情况下,top: 51px;,以便侧边栏在导航栏后面开始,并且它不会隐藏在其后面。
在某些时候它会溢出,这就是他们添加overflow-y: hidden or scroll;

的原因

更清楚。如果您从该元素中删除了.col-sm-3 .col-md-2,并将.sidebar left: 0; right: 0;给了 Enum.filter(to_char_list(str), &(&1 > 32 && &1 < 122)) ,则会占据整个视口区域。

答案 1 :(得分:0)

此处如果您在第一个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:0bottom:0为固定的div提供位置。

并且无论你想要什么:请检查这个codepen:

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