如何确保我的绝对定位 div 足够高以符合我的粘性页脚？答案

【问题标题】：How can I ensure that my absolutely positioned div is tall enough to meet my sticky footer?如何确保我的绝对定位 div 足够高以符合我的粘性页脚？
【发布时间】：2012-12-25 08:09:11
【问题描述】：

我的页面有主要内容、一个粘性页脚和一个绝对定位的右侧面板。我通常从不使用绝对定位，但在这种情况下，当浏览器窗口很薄时，我需要面板与主要内容重叠。目前它看起来是正确的，直到我将窗口垂直缩小得太远。当内容继续低于分页符时，绝对定位的 div 不再与页脚相接。如何确保绝对定位的 div 总是足够长以与页脚相接，因此没有间隙？

这是 HTML：

<body>
    <div id="abs"></div>
    <div class="wrapper">
        <p>Website content here.</p>
        <div class="push"></div>
    </div>
    <div class="footer">
    </div>
</body>

还有 CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}   
.footer {
    background-color:#333;
    position:relative;
    z-index:40;
}   
#abs {
    position:absolute;
    right:0;
    top:0;
    z-index: 20;
    background-color:#579ECF;
    width:100px;
    min-height: 100%;
}
p {
    width:700px;
}

【问题讨论】：

我读过的最好的“第一篇文章”问题。通常他们是无法理解的。我以后提出问题时唯一建议的就是添加jsfiddle.net。只需输入您的代码，按保存，然后将网址复制到您的问题中。

标签： html css css-position sticky-footer

【解决方案1】：

您绝对将abs 定位在正文标记中。由于我不会进入正文的原因是窗口的高度，而不是内容的高度。因此，当您将其设置为 100% 时，它仅与屏幕一样高。

而是将abs div 移动到主要内容div 中，将主要内容设置为relative，并指定top: 0 和bottom: 0 以拉伸abs。

http://jsfiddle.net/3jegZ/

.wrapper {
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}  
#abs {
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    z-index: 20;
    background-color:#579ECF;
    width:100px;
}

【讨论】：

太棒了。非常感谢！！