使用绝对和顶部将页脚定位在页面底部答案

【问题标题】：position footer at bottom of page using absolute and top使用绝对和顶部将页脚定位在页面底部
【发布时间】：2014-07-04 12:15:38
【问题描述】：

我正在创建一个页面，该页面将由ASPPDF 解析为 PDF 文档。

我需要页面的页脚，最好在 PDF 的每一页上重复页脚，但如果它在最后一页上，只要它在页面底部就可以了。 ASPPDF 无法读取固定定位，只能读取带有 top 和 left css 属性的绝对定位。

所以这个JSFiddle

html:

<div id="page">
    <div id="otherContent">
        loads of content
          <div id="footer">
               The footers content
          </div>
    </div>
</div>

css:

#page
{
    border: 1px solid #000;
    position: relative;
    width: 200px;
}
#otherContent
{
    position: relative;
    border: 1px dashed #f00;
    height: 50px;
    width: 100%;
}

#footer
{
    position: absolute;
    bottom: 0;
    width:100%;
    background:#999;
}

显示我想要的结果，只需将底部替换为顶部即可得到this result，这不是我想要的结果。

html:

<div id="page">
    <div id="otherContent">
        loads of content
          <div id="footer">
               The footers content
          </div>
    </div>
</div>

css:

#page
{
    border: 1px solid #000;
    position: relative;
    width: 200px;
}
#otherContent
{
    position: relative;
    border: 1px dashed #f00;
    height: 50px;
    width: 100%;
}

#footer
{
    position: absolute;
    top: 100%;
    width:100%;
    background:#999;
}

有什么想法吗？

【问题讨论】：

标签： html css position pdf-generation

【解决方案1】：

我认为你可能会从内容页面中取出页脚元素并以不同的方式处理它。

此外，您的内容 div 具有指定的高度。如果您用超出限制的内容重新填充该 div，它将取代您的页脚。

我不明白你想要什么，但是对于我认为你遇到的问题，我有我的解决方案：

CSS:
    #page
    {
        border: 1px solid #000;
        position: relative;
        width: 200px;
    }
    #otherContent
    {
        position: relative;
        border: 1px dashed #f00; 
        width: 100%;
    }
    #footer {
            width: 100%;
            position:relative;
            left:0;
            bottom:0;
        }
    }

HTML

<div id="page">
    <div id="otherContent">
      LOOOOOOTS OF CONTENTS
    </div>
    <div id="footer">
               The footers content
          </div>
</div>

小提琴来了：

http://jsfiddle.net/5r5ps/1/

【讨论】：

【解决方案2】：

你可以使用这个css代码

#footer {
    clear: both;
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
}

有关布局和页脚的更多最佳教程，请访问 http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/

【讨论】：