0

スティッキーフッターのあるレイアウトがあります。問題は、メイン センター コンテンツの実際の高さが正しくないことです。フッターの後ろに隠れてエンド ユーザーには見えませんが、たとえばマップを中央に配置するときに問題が発生します。

コンテンツの高さを短くしてフッターの上にとどめ、実際のコンテンツの高さがレンダリングされるようにするにはどうすればよいですか (100% を維持しながら)。説明するために、ここに実際の例があります: http://jsfiddle.net/mp8nr/43/

Firebug を使用して要素にカーソルを合わせると、メイン コンテンツが実際にはスティッキー フッターの下にあることがわかります。トップを切り落とさずに上に移動する必要があるだけですが、私の試みはすべて失敗しました。助けていただければ幸いです。

ここに画像の説明を入力

4

1 に答える 1

1

編集: レイアウトに複数の問題がありました。ここに修正版があります: http://jsfiddle.net/Ym3YP/

さて、実際にはスティッキー フッターを実装していません。固定位置のフッターを配置するだけです。固定または絶対配置を使用すると、問題の要素が HTML フローから取り出されます。これが、メイン コンテンツの div が一番下まで拡張される理由です。フッターが邪魔になっているのを見たり認識したりしません！

これらの問題を回避する固定フッターを適切に実装する方法は次のとおりです。

Ryan Faitから引用:

サンプル HTML:

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

サンプル CSS: 

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

また、このSmashing Magazine の記事もチェックしてください。CSS フローの基本について詳しく説明されているため、この種の問題を回避するのに役立ちます。CSS を始めようとしている人は必読で、将来の多くの頭痛の種からあなたを救います。

于 2012-05-28T15:10:35.250 に答える