Question

所以我试图驯服页脚以使其保持在动态内容容器之下，但无论我怎样尝试它（Pos：Abs，Bottom：0;等等），它要么出现在内容的中间位置，要么固定在底部。要么我不想要。如果有人能够解决我的问题，将不胜感激。

HTML：

<div id="Content">
    <div id="G6"></div>
    <div id="Post-Block">
        <div id="block">
            <div id="feat-img"></div>
            <div id="date"></div>
        </div>
    </div>
    <div id="Footer">
        <div id="G7"></div>
        <div id="FooterBreak"></div>
        <div id="FooterBG"></div>
        <div id="FooterLinks">
        </div>
        <div id="Copyright">
        </div>
        <div id="Copyright2">
        </div>
        <div id="FooterBreak2"></div>
    </div>
</div>

CSS：

#Footer {
    width: 100%;
    height: 230px;
    position: absolute;
    left: 0;
    bottom: 0;
}

#Content {
    z-index: 7;
    background: url(/images/content%20bg.jpg) repeat left top;
    position: absolute;
    top: 336px;
    width: 999px;
    height: auto;
    color: #fff;
    min-height: 950px;
    margin: 0 0 230px;
}
html {
    position: relative;
    height: auto !important;
}
body {
    z-index: 0;
    background: url(/images/background-texture%20d.jpg);
    left: 0;
}
#page {
    z-index: 1;
    width: 1000px;
    height: 1000px;
    margin-left: auto;
    margin-right: auto;
}

Answer 1

编辑：当我使用Chrome开发工具检查Crow's Perch网站时，看起来您的问题是HTML的高度小于您的内容（即，您使用的是负底值一些内容的绝对定位）。鉴于此，您可以将bottom: -865添加到#footer，但鉴于您说您的内容是动态的，这是一个非常脆弱的解决方案。不幸的是，由于您按像素推送了所有元素，因此我认为没有办法让您的页脚动态响应您不断变化的内容。可能需要对代码进行更全面的重构。

祝你好运！

保持页脚低于动态内容

1 个答案: