2

ページの右下にフッターを配置しようとしています。HTML5の<footer>タグを使用しています。

だから、これが私のCSSにあるものです：

footer {
    position:absolute;
    bottom: 0px;
    float: right;
    height: 35px;
    margin: 0px 50px 0px 0px;
    background: #9FF;
    color: #000;
    text-align: right;
    padding: 10px 30px;
}

このコードを使用すると、フッターが完全に下にくっつきます。私が欲しいのは、それがフッターの一番右の部分にもあるべきだということです。

http://i47.tinypic.com/2rrox0w.png

right: 50pxしたがって、 CSS で次のコードを使用すると、. 次に、フッターがブラウザーに対して相対的に配置されます。そのため、ブラウザーのサイズを変更するたびに、フッターの位置がずれます。

私は何をしたいですか？

フッターを一番下に配置したい。また、コンテナー(#main または #maincontent ) から 50px (右) のマージンで、ブラウザーではなく配置されます。動作してfloat: rightいないようです。

私はインターネット全体とスタックオーバーフローも見ました。しかし、この種の問題の解決策は見つかりませんでした。

私は Google Chrome 22 を使用しています。したがって、私のブラウザはほぼ HTML5 と互換性があります。

4

4 に答える 4

2

更新：絶対に配置する必要はありません。位置を削除し、フッターに幅を与えて、このように右にフロートさせます

footer {
    float: right;
    height: 35px;
    margin: 0px 50px 0px 0px;
    background: #9FF;
    color: #000;
    text-align: right;
    padding: 10px 30px;
    width: 180px;
}

マイ・ニュー・フィドル

于 2012-10-01T18:13:24.437 に答える
0

削除floatしてright:50px(または希望する値) を与えます。それでも機能しない場合は、値を指定clear:both;して確認してください。paddingmargin

于 2012-10-01T18:12:09.447 に答える
0

position: relativeコンテナーに追加してから、rightプロパティを使用します。

したがって、完全な CSS は次のようになります。

#main,
#maincontent {
    position: relative;
}

footer {
    position: absolute;
    bottom: 0px;
    right: 50px;
    height: 35px;
    margin: 0px 50px 0px 0px;
    background: #9FF;
    color: #000;
    text-align: right;
    padding: 10px 30px;
}
于 2012-10-01T18:11:46.403 に答える
0

その #main または #maincontent と同じフッターへの集中型コンテナーを作成する必要があります。次に、そのフッター コンテナー内のマージンを使用します。

于 2012-10-01T18:20:45.417 に答える