Question

我的页面包含主要内容，粘性页脚和绝对定位的右侧面板。我通常从不使用绝对定位，但在这种情况下，当浏览器窗口很薄时，我需要面板与主要内容重叠。目前看起来是正确的，直到我将窗口垂直缩小。当内容继续低于分页符时，绝对定位的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;
}

Answer 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;
}

我怎样才能确保我绝对定位的div高到足以满足我的粘性页脚？

1 个答案: