16

タイトルバーとページフッターの両方が固定位置にあるWebサイトを作成しようとしています。つまり、タイトルバーは常に上に、フッターは常に下にあります。

これにより、ページフッターがコンテンツと重ならないように、ページのコンテンツを上にプッシュする必要があるという問題が発生しました。ユーザーがページの一番下までスクロールしたときにオーバーラップが発生しないように、コンテンツの一番下にスペースを追加する必要があります。margin-bottomページの下部にスペースを追加するために、cssプロパティを一番下のDIVに追加しようとしました。これは、 margin-topcssプロパティを使用して一番上のDIVで機能しましたが、下部では機能しませんでした。

これは私のウェブサイトの主要な構造であり、コンテンツはありません。

<html>
<head>
</head>
<body>
    <div class="CONTAINER">
        <div class="PAGENAVBAR">
        </div>
        <div class='CATEGORYNAVBAR'>
        </div>
        <div class='PAGE_CONTENT'>      
            <div class="LEFTCONTAINER">
            </div>

            <div class="RIGHTCONTAINER">
            </div>
        </div>
        <div class="PAGEFOOTER">
        </div>
    </div>
</body>

誰かがこの効果を達成する方法を提案できますか？

4

7 に答える 7

32

これが効果的であることがわかりました：

body {
    padding-bottom: 50px;
}
于 2014-04-17T23:36:50.260 に答える
9

margin-bottomは要素全体を移動します。代わりに、padding-bottomを試してください。

于 2012-05-30T11:20:27.740 に答える
2

最後の要素にpadding-bottomを追加すると、これを行う必要があります。または、container要素にpadding-bottomを追加することもできます。これは、cssに設定されている場合は高さに追加されることに注意してください。

于 2012-05-30T11:20:47.900 に答える
1

これを行うには段落を使用します。HTML段落

于 2012-05-30T11:17:50.867 に答える
0

代わりに「padding-bottom」を使用してみてください。これの動作は、「margin-bottom」よりもさまざまなブラウザー間でより一貫しています。

ただし、計算でこれを使用している場合は、問題の要素の全体的な高さに追加されることに注意してください。

于 2012-05-30T11:21:35.950 に答える
0

私は与えるだろPAGE_CONTENTうmargin-bottom; あなたのとが浮かんでいるoverflow:hidden場合は、それを与える必要があるかもしれません。LEFTCONTAINERRIGHT_CONTAINER

于 2012-05-30T11:27:29.353 に答える
0

css で、コンテナ クラスに margin-bottom 属性を指定します。

.container{
    margin-bottom:100px;
}
于 2021-12-29T13:04:18.453 に答える