0

html は次のとおりです。

<div id="terms" class="terms">
        <center><a href="terms.html">Terms & Conditions</a>
</div>

CSS:

# terms {
width: 100%;
position: absolute;
bottom: 0;

}

.terms {
width: 100%;
position: relative;
bottom: 5px;
}

私は何を間違っていますか？html と css のおそらく 50 種類のバリエーションを試して、用語をページの下部にとどめましたが、ページの中央に浮かんでいます。上から真ん中、左右に移動しますが、ページの一番下に浮かせられません! ページ全体が 2 つのフローティング列として設定され.right、.left

助けてください！！ありがとう！

4

3 に答える 3

2

以下のデモを参照してください

デモはここをクリック

HTML 

<div class="wrapper">
    <div id="terms">
        <center><a href="terms.html">Terms &amp; Conditions</a></center>
    </div>
</div>

CSS

.wrapper{
    width:500px;
    height:500px;
}

#terms {
    position: fixed;
    bottom:5px;
    width: 100%;
    left:0px;
    height:25px;
}

コメントに従って更新:

クリックしてデモ 2

HTML 

<div class="wrapper">
    <div class="pageBox">
        <p>
        This is test page height will be managed accordingly and footer will be attached after this box.
        </p>
        <p>
        This is test page height will be managed accordingly and footer will be attached after this box.
        </p>
        <p>
        This is test page height will be managed accordingly and footer will be attached after this box.
        </p>
        <p>
        This is test page height will be managed accordingly and footer will be attached after this box.
        </p>
        <p>
        This is test page height will be managed accordingly and footer will be attached after this box.
        </p>
    </div>

    <div id="terms">
        <center><a href="terms.html">Terms &amp; Conditions</a></center>
    </div>
</div>

CSS

.wrapper{
    width:500px;
}

.pageBox{
    height:auto;
}

#terms {
    width: 100%;
    height:25px;
}
于 2012-05-21T05:03:55.560 に答える
2

私はあなたのためにフィドルを設定しました：

http://jsfiddle.net/uh53X/1/

コードを次のように変更します。

HTML

<div class="terms">
  <center><a href="terms.html">Terms & Conditions</a></center>
</div>

CSS

div.terms{
    display:block;
    position:absolute;
    bottom:0;
    right:0;
    width:100%;
    background:#eee;
    border:1px solid #ddd;
}

お役に立てれば。

于 2012-05-21T04:58:14.730 に答える
1

コンテンツの量に関係なく、ページの下部にフッターを固定しますか? - sticky footer、これは、フッターを一番下に固定したいときに使用するものです（ただし、サンプルページの外観からは、あなたが求めているものではないかもしれません）

それとも、ページの最後の項目の下に配置したいだけですか? 最後のアイテムの下、用語の前にクリア div/br を追加しないのはなぜですか

.clearboth {
    font-size: 1px;
    line-height: 0px;
    clear: both;
    height: 0px;
}

<br class="clearboth" />

次に、両側のフロートに関係なく、divを通常のアイテムとしてその下に置くことができます

これらのいずれかが役立つことを願っています

于 2012-05-21T08:47:24.017 に答える