css - 将页脚保持在动态内容下方

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，但鉴于您说您的内容是动态的，这是一个非常脆弱的解决方案。不幸的是，由于您对所有元素进行像素推送，我认为没有办法让您的页脚动态响应您不断变化的内容。可能需要对代码进行更全面的重构。

祝你好运!