0

ページの下部に固定される Web ページのフッターを作成しようとしています。私が抱えている問題は、「メイン」コンテンツが「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

それが答えなのか、単なる「ファッジ」なのかはわかりませんが、「top：700px;」を変更してください。テーブルの場合は「padding-top：700px;」私がやりたいことをしているようです。

これが間違っているのには理由があると確信していますが、すぐに見つかることは間違いありません。しかし今のところそれは機能しているようです。

于 2012-11-26T12:12:31.593 に答える
0

追加してみましたか

clear: both;

フッタークラスに？

私が同じ問題を経験していたとき、これは私にとってはうまくいくようでした。

于 2012-11-23T16:48:24.000 に答える