2

コンテンツの最小高さを超えないように固定フッターを保持する方法があるかどうか、誰かが提案できますか? (したがって、コンテンツの最小高さがブラウザー ウィンドウ (ビューポート) よりも高い場合、固定フッターは最小高さの上に留まります。それ以外の場合、ビューポートが高い場合、フッターは下部に固定する必要があります)

JS/jQuery を使用してのみ作成できると思います。誰かがそれを達成する方法のヒントをくれれば、私は感謝します。

html, body {
   height: 100%;
   min-height: 800px;
   width: 100%;
   margin: 0;
   padding: 0;
}
header {
   width: 100%;
   height: 50px;
   background: blue;
   position: fixed;
   top: 0;
}
#content {
   width: 85%;
   margin: 0 auto;
   padding: 50px 0;
}
footer {
   width: 100%;
   height: 50px;
   background: blue;
   position: fixed;
   bottom: 0;
}

フィドルの例

私の場合、最小の高さに関係なく、フッターは常にブラウザーの下部に貼り付けられます。

4

3 に答える 3

0

あなたがしなければならないことは1つだけです：

.footer {
    width: 100%;
    height: 50px;
    background: blue;
    position: fixed;
    /* the change is here */
    top: 800px;
}

しかし、この方法ではフッターは表示されません! それ以外の場合は、解像度の高さが 800px を超える大画面を使用します。私のノートパソコンの画面はわずか 768px です。Javascript を使用しない場合は、可能な画面解像度に応じて、多くの css メディア クエリ ルールを作成する必要があります。

http://jsfiddle.net/Dcsf3/3/

于 2013-11-04T01:22:54.897 に答える
0

よくわかりませんが、多分あなたはそのようなものが欲しいですか？

.b-footer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    max-height: 600px;
}

    .b-footer__l {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }

footer {
    width: 100%;
    height: 50px;
    margin-top: -50px;
    background: blue;
    position: fixed;
}

http://jsfiddle.net/3hcCu/

于 2013-11-05T08:58:55.487 に答える