CSSの幅：100％が画面に合わない

私のフッタをページの最後にしたいので、position：absoluteとbottom：0を使用しています。問題は、背景色が画面に合うように拡張されることはありませんので、私は幅を使用してみました：100％が、今、それは余分な画素を有するCSSの幅：100％が画面に合わない

これは私が http://jsfiddle.net/SRuyG/2/ 、それは少し厄介だ（申し訳ありませんが作成した例です。私はちょうどCSSを学び始めています）

私は見つけたチュートリアルの中でもスティッキーフッタを試しましたが、どちらもうまくいきません。ページの下部にフッターをどのくらい正確に設定でき、背景が画面サイズに合っていますか？

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

body {  
    font: 13px/22px Helvetica, Arial, sans-serif; 
    background: #f0f0f0; 

} 

.contentWrapper{ 
    min-height: 100%; 
    margin-bottom: -142px; 
} 

.contentWrapper:after { 
    content: ""; 
    display: block; 
    height: 142px; 
} 

nav { 
    background: #222; 
    color: #fff; 
    list-style: none; 
    font-size: 1.2em; 
    padding: 10px 20px; 
    box-shadow: 0px 0px 4px 4px #888888; 

} 

#navBar li{ 
    display:inline; 
} 

#navBar li a{ 
    color: #fff; 
    text-decoration: none; 
    padding: 25px; 
} 
#navBar li a:hover{ 
    background:#fff; 
    color: #222; 
    text-decoration: none; 
    padding: 25px; 
} 

footer { 
    position:absolute; 
    background: #222; 
    color: #fff; 
    list-style: none; 
    font-size: 1.2em; 
    padding: 10px 20px; 
    bottom:0; 
    width: 100%; 

}

HTML：：

<body> 

    <nav> 
     <ul id='navBar'> 
      <li><a href="#">link 1</a></li> 
      <li><a href="#">link 2</a></li> 
      <li><a href="#">link 3</a></li> 
     </ul> 
    </nav> 



    <div id="contentWrapper"> 
     <section id="intro"> 
     <header> 
      <h2>Intro</h2> 
     </header> 
     <p>Paragraph goes here, long and long paragraph, blah blah blah. Paragraph goes here, long and long paragraph, blah blah blah. 
      Paragraph goes here, long and long paragraph, blah blah blah. Paragraph goes here, long and long paragraph, blah blah blah. 
      Paragraph goes here, long and long paragraph, blah blah blah. Paragraph goes here, long and long paragraph, blah blah blah. 
     </p> 
     </section> 
    </div> 

    <footer> 
      <section id="about"> 
       <header> 
        <h3>Footer</h3> 
       </header> 
       <p>some text here. </p> 
      </section> 
    </footer> 

</body>

出典

2013-07-26 punkaceratop

box-sizing: border-box;を使用して、<footer>の幅に境界およびパディング領域を制限してみてください。padding: 10px 20pxルールはスクロールバーを表示させる原因になります。

footer { 
    position:absolute; 
    background: #222; 
    color: #fff; 
    list-style: none; 
    font-size: 1.2em; 
    padding: 10px 20px; 
    bottom:0; 
    width: 100%; 
    box-sizing: border-box; 
}

http://jsfiddle.net/SRuyG/4/

出典

2013-07-26 19:46:43 Adrift

あなたのフッターはHTML内にある体、内にある

は

CSSありがとうございます。あなたが幅を宣言していないので、それは必要以上に拡大することはありません。あなたの特定のHTMLのために、あなたはあなたのCSSでこのような何かを行う必要があります。

body, html { 
    width: 100%; // or body { width: 960px; } if you're using a fixed width 
} 

footer { 
    width: 100%; 
}

最終的には、パーセンテージで設定した任意の幅は、（ほぼ）常に親との比較であることを行っていることを覚えておいてください。 50％の親の100％はまだ50％です。 75％の親の50％は、ビューポート全体の幅の37.5％しか得られません。

出典

2013-07-26 19:46:29 mikedugan

あなたはフッターからpadding: 10px 20px;を削除し、これを試してください。..

ことfooter..you'llからこれらのルールを削除footer section{margin:10px 20px}

http://jsfiddle.net/SRuyG/5/

出典

2013-07-26 19:51:30 David

この方法は、あなたが必要な場合は受け入れ答えよりも優れているウルCSSでこの事を追加していますボックスサイズのプロパティをサポートしていないIE7以下をサポートします。 –

を追加することができますfine

CSSの下から

position:absolute; 
bottom:0; 
width:100%;

updated fiddle here

出典

2013-07-26 20:03:38 sa77

私はパディングプロパティ

footer { 
     position:absolute; 
     background: #222; 
     color: #fff; 
     list-style: none; 
     font-size: 1.2em; 
     bottom:0; 
     width: 100%; 

    }

を取り除き、

footer section 
    { 
     margin:10px 20px; 

    }

出典

2013-07-27 20:47:15

CSSの幅：100％が画面に合わない

答えて

関連する問題