0

私は現在、私が構築したさまざまな Web サイトで以前に何度も使用して成功したスティッキー フッターを使用しようとしています。ここにリンクがあります：http://ryanfait.com/sticky-footer/

今回の問題は、これをより応答性の高いものにしようとしているため、高さに特定のピクセル量を使用したくないため、パーセンテージに切り替えてみたことです。

html, body {
    height: 100%; margin: 0px; padding: 0px;
}

#wrapper{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-bottom: -25%;
    background: lime
}

#spacer{
    background: blue;
    height: 25%;             /* This should be exactly the same as #footer height. */
}

#footer{
    background: magenta;
    height: 25%;
}

HTML は次のとおりです。

<!DOCTYPE html">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>

        <link href="https://localhost/wordpress/wp-content/themes/TesterTheme/style.css" rel="stylesheet" type="text/css" />

    </head>

    <body>
        <div id="wrapper">

Content goes here.

</div><!-- End Wrapper -->

<div id="spacer"></div>

<div id="footer">
</div>

</body>
</html>

前に言ったように、高さに 200px などの特定のピクセル量を使用すると (ラッパーの margin-bottom を -400px に変更すると)、正常に動作します。高さにパーセンテージを使用すると、親要素の高さのパーセンテージが使用され、すべての先祖要素の高さが定義されていることを確認する必要があることを読みました。フッターの祖先は body と html だけなので。これが実際に行うことです。ピクセル定規で測定したところ、フッターとスペーサーはビューポートの 25% まで測定されました。しかし、神はその理由を知っているので、ブラウザの横にスクロールバーが表示されます（はい...フルスクリーンです）、まるで魔法のように体が50ピクセルほど余分に拡張されているかのようです。助けてください、これまでに 9 時間費やしました。あちこち検索して、さまざまな戦術を試してみましたが、いつも同じ結果が得られます。パーセンテージで目的の結果が得られないのはなぜですか?

4

1 に答える 1

1

これを修正するためのオプションはたくさんあります。あなたがそうであるようにパーセンテージを使用することは良い考えではありません..それthisはjavascriptでどのように変化するかに似ています.

個人的には、レスポンシブのためにこのルートに行きます。

<div class="wrap">
  <div class="stuff"></div>
  <div class="stuff"></div>
  <div class="stuff"></div>
</div>
<div id="footer"></div>

そうすれば、フッターは常に残りのコンテンツの下に設定されます。複数の場所でフッターの高さを指定する必要はありません。この設定では、パーセンテージを自由に使用してください。

100% 満足できない場合は、jQuery/javascript を使用してコンテンツを拡張してください。または、CSS メディア クエリです。

于 2013-04-09T21:08:37.667 に答える