1

私のフッターは、すべてのコンピューター画面に完璧に配置されています。しかし、Iphone でテストすると、フッターがページの中央でスタックし、水平方向に繰り返されません。

どうすれば、フッターが Iphone 画面や他のスマートフォンの下部にも表示されるようになりますか?

これは私のフッターの CSS です:

#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:270px;
    background-image:url(images/footer.png);   
    }
4

2 に答える 2

2

位置を固定に変更して、この問題を解決できることを願っています。

#footer {
    position:fixed;
    bottom:0;
    width:100%;
    height:270px;
    background-image:url(images/footer.png);
}
于 2012-04-16T14:40:21.270 に答える
0

まず、動的ページではさらに問題が発生する可能性があるため、静的ページであることを願っています。

とにかく、フッターを 0 から一番下に配置するのは得策ではありません。フォントが大きい場合や解像度が小さい場合 (ノートブックやスマートフォンを使用している場合など)、コンテンツがフッターの下に表示されます。ページ。その特定の質問に答えるコードがウェブ上にたくさんあります。そしてそれは「スティッキーフッター」と呼ばれます。

そのページのコピペです。気分を害する人がいないことを願っています。すでに公開されている場合は、すべてを書き直す必要はありません。満足できない場合は、「Sticky footer」をググってください:


Web サイトで CSS スティッキー フッターを使用する方法

次の CSS 行をスタイルシートに追加します。.wrapper の余白の負の値は、.footer および .push の高さと同じ数値です。負のマージンは、常にフッターの高さ全体 (追加するパディングや境界線を含む) と等しくする必要があります。

* {
    margin: 0;
    }
html, body {
    height: 100%;
    }
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
    }
.footer, .push {
    height: 4em;
    }

この HTML 構造に従います。CSS で完全に配置されていない限り、.wrapper および .footer div タグの外側にコンテンツを配置することはできません。また、.push div 内にコンテンツが存在しないようにする必要があります。これは、フッターを「押し下げる」非表示の要素であり、何も重ならないようにするためです。

<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>

編集:まさに私が述べた動作をしています。ページをズームすると (Control + '+')、コンテンツがフッターの下にどのように表示されるかがわかります。

于 2012-04-16T13:40:04.133 に答える