「テーブル」シンドロームを排除しようとしているアマチュアCSSコーダのために、固定フッターが正しく機能するようになるいくつかの問題があります。CSS固定フッタの幅（パッド付き）
フッターDIVを100％の幅に設定しましたが、DIVの内部に30ピクセルのパディングがあるため、フッターは100ピクセルを超えて60ピクセル伸びます。
どうすればこの問題を解決できますか？
私のCSSはこれです：
#footerDiv {
background:url(../images/background/mainBG.gif);
margin:0 auto;
padding:15px 30px;
width:100%;
bottom:0;
left:0;
z-index:4;
position:fixed
}
それはボックスモデルの問題のように聞こえます。詳細はlook hereをご覧ください。
それは右のように見えるようにするためのコード、
.footer {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
それは私に多くの意味を成しているので、私は時々、ページ上のすべての要素にそれを適用する（すなわち*で.footerを交換してください）。
ありがとう、これは将来的に知っておくと便利です。私は自分のコードを修正するためにあなたの答えを使用していないが、あなたは簡単な修正について私に考えを与えた。私は私の内容を保持しているフッターDIVの中に別のDIVを持っています。私はラッパーのためのパディングを取り除き、その代わりにDIVの内側にマージンを加えました。これは100％が真実であることを意味しました。とにかくありがとう:) – TheCarver
良いアイデア、私はあなたに影響を与えることができてうれしい！ – FakeRainBrigand
CSSで要素の幅を設定すると、DIVのコンテンツ領域のみが設定されます。パディングと罫線の幅はコンテンツ領域外で計算されます。しかし、別のDIVをフッターDIVの中に置き、外側のDIVの100％幅を保存するために、そのパディングを30pxに設定することができます。
<DIV style="width:100%">
<DIV style="padding:30px">
<!-- Actual footer content -->
</DIV>
</DIV>
これはCSS2.0と互換性があります。 ;）
ああ、私はちょうどあなたがこれを書き込む前に非常に似たようなことをしました。あなたのような内部のDIVを追加しましたが、左右に30pxのマージンを追加しました。これは、私の外側のDIVが100％真実であることを意味しました。ありがとう – TheCarver
コードを投稿できますか？ –
編集しました、ありがとう... – TheCarver
一般に、 '' '＃footer''や' '' .footer''はより意味的に正しいものです。 [HTML5 footer element]（http://dev.w3.org/html5/spec-author-view/the-footer-element.html）もありますが、ここ数年はその点については議論しません。 ） – FakeRainBrigand