1

CSSでスティッキーフッターを実装しようとしています。これは一般的な問題であることを認識しているため、Google で見つけたさまざまな解決策を試しました。

しかし、私が見つけた解決策のどれも、私がやろうとしていたことを完全に達成するものではありませんでした。フッターを一番下に配置したいだけでなく、十分なコンテンツがない場合でも、ヘッダーとフッターの間に を配置して、使用可能なすべてのスペースを占有できるようにしたいと考えています ( の周りにdiv境界線を配置した場合を想像してください。#contentコンテンツの量に関係なく、ヘッダーからフッターまで展開する必要があります。)

これは、ソリューションが失敗する場所です。「プッシュ」要素が邪魔になります。divまたは、フッターを破棄したり、ページ幅を 100% より大きくしたりせずに、これを 100%に設定する方法はありません。

基本的なマークアップは次のとおりです。

<!DOCTYPE html>
<html>
    <body>
        <header>
            Header!
        </header>
        <div id="content">
            Content!
        </div>
        <footer>
            Footer!
        </footer>
    </body>
</html>

繰り返しになりますが、CSS でやりたいことを実行させるためのアイデアが尽きてしまいました。Javascript を使用しない場合があります。ヘルプ？

編集:ヘッダーに動的な高さを持たせたいと思います。フッターは常に表示されるべきではありません。このように動作するはずです。

編集 2:黒い領域がフッターまで広がることを除いて、このように見えるはずです。

4

3 に答える 3

1

「コンテンツ」の高さを 100% にするには、高さとコンテンツの の両方にhtmlとを設定する必要があります。body100%min-height100%

また、コンテンツの上部/下部にパディングが必要であるため、ヘッダーとフッター (100% の高さを台無しにして不要なスクロールバーを作成しないように絶対に配置されます)。このパディングには、ヘッダー/フッターの高さを知っている必要がありますが、それらは静的であると想定されているため、そうする可能性が非常に高くなります。

最後に、パディングが高さに追加border-boxされないようにするために、コンテンツの として必要です。box-sizing

これは、コンテンツのサイズに関係なく機能します。

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
}
#content {
    min-height: 100%;
    background-color: blue;
    padding-top: 50px;
    padding-bottom: 50px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: white;
}
header {
    height: 50px;
    background-color: yellow;
    position: absolute;
    width: 100%;
}
footer {
    position: fixed;
    background-color: red;
    height: 50px;
    bottom: 0;
    width: 100%;
}

実際に:

http://jsfiddle.net/s8gZB/2/

http://jsfiddle.net/s8gZB/1/

于 2013-03-02T16:20:49.570 に答える
0

最良の方法は、両方をdiv設定したコンテンツの絶対値を設定することです。top: HEADER_HEIGHT;bottom: FOOTER_HEIGHT;

また、divinnerを100％の高さにプッシュするには、その親にheightnotが必要min-heightです。問題がに変更min-heightされないようにするにheightは、を追加する必要がありますoverflow: visible;。

于 2013-03-02T16:15:37.813 に答える
0

フッターにこれを試してください

位置: 固定;

下：0;

スクロールがどこにあっても、フッターは常に表示されます。

于 2013-03-02T16:10:12.270 に答える