Question

我创建了一个将由ASPPDF解析为PDF文档的页面。

我需要页面的页脚，它更喜欢在PDF的evry页面上重复页脚，但是如果它在最后一页上是好的，只要它在在页面的底部。 ASPPDF无法读取固定位置，只能读取顶部和左侧css属性的绝对定位。

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

有什么想法吗？

Answer 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/

Answer 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/

使用绝对和顶部在页面底部的位置页脚

2 个答案: