23

ここや他の場所で同様の問題を探しましたが、決定的な答えが見つからないようです。フッターに到達するのに十分なテキストをページに追加すると、フッターがテキストに重なってしまいます。ブラウザー ウィンドウのサイズを小さくして、フッターとコンテンツを保持するコンテナーを強制的に一致させた場合も同じです。時折、これは「コンテナ」別名明るい灰色の部分にも現れ、常に高さの 100% を占めているはずですが、何らかの理由で縮小します。

これは私を一晩中眠らせないようなものなので、あまり明確に考えていません. 私はそれが愚かで簡単に修正できるものだと確信していますが、私はプロのデザイナーではないので、問題が何であるかを確実に見逃しています.

以下は私のコードと、ページのすべての関連部分で作成した JSFiddle です。

html, body {
    margin: 0;
    padding: 0;
}
html, body {
    background: #252525;
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
    text-align: center;
}
body {
    background: #363636;
    border-left: 1px solid #111;
    border-right: 1px solid #111;
    margin: 0 22.5%;
}
#container {
    color: white;
    margin-bottom: 2em;
    min-height: 100%;
    overflow: auto;
    padding: 0 2em;
    text-align: justify;
}
#footer {
    bottom: 0;
    color: #707070;
    height: 2em;
    left: 0;
    position: fixed;
    font-size: small;
    width:100%;
}
<body>
    <div id="container">
         <h1>A webpage</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium augue quis augue ornare tempor. Donec eu purus vitae nisi eleifend euismod. Nullam sem nunc, bibendum tempor iaculis eu, consequat in sem. Phasellus nec molestie orci. Fusce varius nisi est, non aliquet dolor porttitor non. Aliquam eu ante nec massa pulvinar posuere. Praesent consectetur porttitor ipsum, eget viverra urna ultricies et.
            <p>Quisque vehicula neque a enim dignissim, et vestibulum orci viverra. Pellentesque aliquam feugiat interdum. Ut molestie vitae lacus in eleifend. Sed scelerisque urna ut elit venenatis suscipit. Nullam nec urna vel enim mattis interdum ut consequat libero. Proin in imperdiet orci. Vivamus felis lacus, dictum ac eros eu, malesuada pretium nisi. Cras suscipit nunc magna, a egestas neque facilisis sed.</div>
    <div id="footer">This is a footer.</div>
</body>

JSFiddle の例を次に示します。

4

6 に答える 6

25

これを変える：

#footer {
    bottom: 0;
    color: #707070;
    height: 2em;
    left: 0;
    position: relative; //changed to relative from fixed also works if position is not there
    font-size: small;
    width:100%;
}

デモ

于 2013-09-24T19:54:29.283 に答える
8

デモを見る

私はいくつかのCSSの変更を行いました。見てください。お役に立てば幸いです。

更新された CSS

#footer {
 bottom: 0;
 color: #707070;
 height: 2em;
 left: 0;
 position: fixed; /* OldProperty */
 position: static;/* Updated Property */
 font-size: small;
 width:100%;
}
于 2013-10-09T09:00:59.450 に答える