0

我一直在尝试为我的网页创建一个页脚，该页脚将锚定到页面底部。我遇到的问题是，只要将“主要”内容设置为“TOP：0”；无论扩展多少，页脚都保留在主要内容下方。但是，一旦我将主要数据向下移动一点（例如，在我的示例中为“TOP:700px”），页脚数据就会消失在主要数据下方。

我尝试过使用“position:absolute”和“position:relative”，但无论我如何设置，除非所有主要项目都设置为“TOP:0”，否则页脚会消失。

有没有一种方法可以使页脚保持在主要内容下方，无论它在页面上的什么位置？

（原因是我有大约 5 个元素需要放置在页面上的不同位置，但要保持页脚显示）

<style>
body 
{
    margin:0;
    padding:0;
    height:100%;
}

table
{
    border: 5px solid #000000;
    color:#000000;
}

#Container
{
    min-height:100%;
    position:relative;
}

#Header
{
    position:absolute;
    top:0;
    width:100%;
    height:5px;
}

#main
{
    padding:10px;
    padding-top:5px;    /* Height of the Header */
    padding-bottom:200px;   /* Height of the Footer */
}

#Footer
{
    position:absolute;
    bottom:0;
    height:200px;
}

#TabOne
{
    position:relative;
    top:700px;
}

#TabFt
{

}
</style>

<div id="container">    
    <div id="header">
    </div>

    <div id="main">

        <table id="TabOne">
            <th>TABLE ONE</th>
        </table>

    </div>

    <div id="footer">
        <Table id="TabFt">
            <th>!!FOOTER SHOULD BE BELOW TABLE ONE!!</th>
        </Table>
    </div>
</div>
4

2 回答 2

0

您是否尝试过添加

clear: both;

到页脚类？

当我遇到同样的问题时，这似乎对我有用。

于 2012-11-23T16:48:24.000 回答
0

我不确定这是一个答案还是只是一个“软糖”，但通过更改“top:700px;” 为表格“填充顶部：700px；” 它似乎在做我想做的事。

我确信这是错误的原因，毫无疑问，我很快就会找到。但现在它似乎正在工作。

于 2012-11-26T12:12:31.593 回答