1

私のフッターは、ラッパーと本文とともに 100% のページ幅に設定されていますが、何らかの理由でフッターの右側に小さな (25px 程度) 隙間があります。ラッパーから移動しようとしましたが、うまくいきませんでした。本文には既にマージンとパディングが 0 に設定されています。ヘッダーにはこの問題はありません。

コードは次のとおりです。http://jsfiddle.net/w63Jk/

どうすればこれを修正できるかについて何か考えはありますか?

4

3 に答える 3

5

width作品から を削除する#header:

#header {
    padding:5px;
    /* width: 100%; */
    background-color:#272727;
    height:100px;
    margin-bottom:30px;
    -webkit-box-shadow: 0 8px 6px -6px black;
       -moz-box-shadow: 0 8px 6px -6px black;
            box-shadow: 0 8px 6px -6px black;

}

これは、CSS でパディングを定義している場合、パディングが要素に追加の幅を追加しているためです: http://jsfiddle.net/w63Jk/2/

IE、FF、および Chrome で動作します。

情報: DIV などのブロック要素は、CSS で他の幅が定義されていない場合、デフォルトで親の使用可能な全幅を常に持ちます。

于 2012-06-11T18:28:10.147 に答える
0

他の要素のパディングがフッターの幅に影響している可能性があります。body と html の両方でマージンとパディングが 0 に設定されていることを確認する必要があります。

*, html, body { margin: 0px; padding: 0px; }

これで解決しない場合は、他の要素の継承/固有のマージンまたはパディングがフッターを壊していると思います。( p、divなど。) Firefox で Web ページを開いて Firebug を使用するか、Chrome で開発者ツールを使用して、どの CSS が影響している可能性があるかを確認してください。

(考慮すべきもう 1 つの点: レイヤー化または継承の問題である可能性がありますか?複数の CSS ファイルがありますか?)

于 2012-06-11T18:24:38.700 に答える
0

さて、これが私がしたことです

HTML:

<html>
<body>
    <div id="wrapper">
        <div id="footer">
            Hii
        </div>
    </div>
</body>
</html>

CSS : 

body{
background:red;
width:100%;
height:100%;
padding:0;
margin:0;}


#wrapper{background:green;
width:100%;
padding:0;
height:100%;
margin:0;
position:absolute;}

#footer {
background:#272727;
width:100%;
height:40px;
position:absolute;
bottom:0;
left:0;
margin-top:20px;
-webkit-box-shadow: 0 0px 20px  black;
-moz-box-shadow: 0 0px 20px black;
 box-shadow: 0 0px 20px  black;
}​

そして、それはうまく機能しています。コードを確認し、それに応じて変更してください。 jsFiddle のコードのリンクをたどってください。

于 2012-06-11T18:25:29.870 に答える