2

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

1 回答 1

0

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

而是将absdiv 移动到主要内容 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;
}
于 2013-01-10T20:14:49.287 回答