html - 具有 100% 高度子 div 的 BS 3.0 粘性页脚

Question

我正在使用 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% 高度的可拉伸(stretch)容器，这样我就可以在其中放置背景。

谢谢

Answer 1

我不太确定这个解决方案是否满足您的需求，但它涉及将一个 div 绝对定位在侧边栏后面并使其拉伸(stretch) #wrap 的高度通过设置 top和 bottom为 0。它本质上继承了高度，同时避免显式声明高度属性。唯一的潜在问题是，如果您在侧边栏上方有其他元素(即标题)，因为 div 也将延伸到这些元素后面。

http://jsfiddle.net/qaB8D/

#wrap {
    position: relative;
}

aside, #words {
    /* This is just so the sidebar stays left, and the text stays right */
    display: table-cell; 
}

aside {
    width: 100px;
}

aside:before {
    content: '';
    position: absolute;
    background-color: red;
    top:0;
    bottom: 0;
    width: inherit;
    z-index: -10;
}

/* include Sticky Footer code/*