1

私はcssに非常に慣れていませんが、いくつかの概念、特にポジショニングを理解するのはまだ難しいと感じています。とにかく、私の問題はposition: relative;、コンテナとフッターを設定するとposition: absolute; bottom: 0; 、フッターが小さくなったことです。コードを配置する前のコンテナと同じ幅でした。フッターをコンテナの最下部に配置したいので、これを行いました。

以下はスクリーンショットです。

ここに画像の説明を入力

あずき色はフッターです。

フッターでは div を使用しませんが、代わりに html element を使用します<footer>。

私のCSSコード:

div#container {
    height: 100%;
    width: 1000px;
    margin: auto;
    background-color: #C9C9C9;
    position: relative;
}

footer {
    background-color: #340B09;
    height: 50px;
    position: absolute; 
    bottom: 0;
}

助けてください。

4

5 に答える 5

5

幅を追加: 1000px; あなたのフッターに

于 2012-09-08T15:08:14.160 に答える
2

これが役立つ場合は、これを確認してください https://developer.mozilla.org/samples/cssref/css-positioning.html

また、ブラウザにfirebugをインストールすることをお勧めします

また、フッターの上に div コンテナーを追加し、高さを指定して、フッターが下部に留まるようにします。ポジショニングを明示的に使用しないでください...これは初めてなので。

しばらく時間をかけてください。その上にあるでしょう..CSSの位置で:-)

于 2012-09-08T15:06:24.780 に答える
1

フッターの幅を 980px に宣言することで適切に解決しました。1000px を試してみると、コンテナよりも広くなりました。調査の結果、mozilla と webkit には幅にパディングが含まれていないことがわかったからです。

于 2012-09-10T10:05:12.237 に答える
1

あなたが使用している;

footer {
    background-color: #340B09;
    height: 50px;
    position: absolute; 
    bottom: 0;
}

何らかの ID やクラスの場合footerは、CSS のように#footerorで定義する必要が.footerあり、html5 要素を使用している場合は問題ありませんfooter。

要素を引き伸ばしてコンテナを埋める場合は、 を使用しますwidth: 100%。フッターが 内にある場合は、これをフッターに追加しますcontainer。それ以外の場合は、画面に引き伸ばされます。

于 2012-09-08T15:21:52.380 に答える