BS 3.0粘性页脚,100%高度的儿童divs

时间:2013-11-27 19:16:37

标签: html css twitter-bootstrap twitter-bootstrap-3

我正在使用Bootstrap 3.0的粘性页脚方法,如他们的示例中所述。我工作得很好,这不是我正在努力的事情。

它要求包装器具有以下内容:

html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}

现在我正在尝试在其中设置一些100%高度的容器而我不能,因为父级上有一个auto高度。有没有办法绕过这个并保持我的粘性页脚?我想把100%高度的容器拉伸,这样我就可以把背景放进去了。

由于

1 个答案:

答案 0 :(得分:0)

我不太确定这个解决方案是否符合您的需求,但它涉及将侧边栏后面的div绝对定位,并通过设置#wrap和{{1}使其延伸到top的高度它基本上继承了高度,同时避免显式声明高度属性。唯一可能的问题是如果你有其他元素在侧边栏(即标题)之上,因为div也会在这些元素后面延伸。

http://jsfiddle.net/qaB8D/

bottom