1

レスポンシブ Web サイト用のスティッキー フッターを作成しようとしています。私はインターネットを検索し、さまざまな解決策を見つけましたが、私の問題は、フッターのテキストの量が原因で、フッターの高さが変更され、ワー​​ドラップが発生することです。Ryan Fait のサイト ( http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ ) でメソッドを使用してみましたが、フッターの高さがCSS のプッシュ値を設定するのは難しいです。現在、フッターを下部に固定しているだけですが、フッターの高さが高くなると、小さなビューポートで貴重なスペースを占有するため、問題が発生しています。以下は、私のフッターに含まれる情報の量の例です。助言がありますか？

<footer>
<div id="upperFooter">
<p>2000 - 2012 College Name | Copyright | Internet Privacy Policy | Disclaimer |      Collection and Use of Social Security Numbers</p>
</div>
<!-- end upperFooter -->
<div id="lowerFooter">
<p>College Name is a member of the Stated State College System.   College Name is not affiliated with any other public or private university or College in State or elsewhere. </p>
<p>College Name is a division of College Name and is accredited by the Commission on Colleges of the Association of Colleges (“XIXI”) to award the baccalaureate and associate degree. Contact the Commission on Colleges at for questions about the accreditation of College Name.</p>
</div>
<!-- end lowerFooter --> 
</footer>
4

5 に答える 5

1

フッターに絶対位置を指定してみてください

footer {
position: absolute;
bottom: 0;
}
于 2012-08-03T12:30:05.697 に答える
0

このブログ投稿をチェックしてみてください: http://timothy-long.com/responsive-sticky-footer/

彼はdisplay: tableそれを行うためにハックを使用しますが、デモ ページは問題なく動作します。

もう 1 つのオプションは、メディア クエリを使用して、フッターの高さの変化に合わせて調整することです。

于 2013-04-03T00:51:22.247 に答える
-3

どうですか footer { position: fixed; bottom: 0; }

于 2012-09-22T06:14:06.033 に答える