8

フッターをページの最後に配置しようとしているので、 position:absolute と bottom:0 を使用してこれを行います。問題は、背景色が画面に合わせて拡張されないことです。そのため、 width:100% を使用してみましたが、現在は余分なピクセルがあります

これは私が作成した例です http://jsfiddle.net/SRuyG/2/ (少し面倒です。CSSを学び始めたばかりです)

見つけたいくつかのチュートリアルのスティッキーフッターも試しましたが、どちらも機能していません。では、フッターをページの下部に設定し、背景を画面サイズに合わせるにはどうすればよいでしょうか?

ありがとうございました

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>
4

5 に答える 5

7

を使用して、境界線とパディング領域を-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-26T19:46:43.250 に答える
4

フッターは、HTML 内にある本文内にあります。幅を宣言していないため、必要以上に拡大することはありません。特定の 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-26T19:46:29.620 に答える
1

以下のCSSから、パディングプロパティを削除しました 

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

    }

このことをur cssに追加します

 footer section
    {
        margin:10px 20px;

    }
于 2013-07-27T20:47:15.403 に答える
1

これを試して..

これらのルールをフッターから削除してください..大丈夫です

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

ここでフィドルを更新しました

于 2013-07-26T20:03:38.227 に答える