12

私のウェブページのいくつかは短いです。これらのページでは、フッターがウィンドウの中央に表示され、フッターの下に空白（白）が表示される場合があります。それは醜いようです。フッターをウィンドウの下部に配置すると、コンテンツの限られた本文が引き伸ばされます。

ただし、Webページが長く、フッター（またはそのすべて）を表示するためにスクロールする必要がある場合は、通常どおりに動作するはずです。

CSSでこれを行う適切な方法は何ですか？これを実現するにはJavascript/jQueryが必要ですか？

私はIE9+と他のブラウザの最新バージョンだけを気にしています。フッターの高さもページごとに変わる可能性があるので、高さに依存したくありません。

4

6 に答える 6

13

このサイトをチェックしてください。彼は css でこれを行う方法についての優れたチュートリアルを持っています。

Matthew のサイトが削除された場合に備えて、彼の CSS をコピーしました。

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

編集

フッターの高さはページごとに異なるため、フッターの高さを取得してから、javascript で #body padding-bottom を調整できます。jqueryを使った例です。

$(function(){
    $('#body').css('padding-bottom', $('#footer').height()+'px');   
});
于 2012-11-12T18:33:56.207 に答える
2

これを試してみてください。

これは、ページの下部にフッターを配置するために Github が使用するスタイルのコピーです。これは少しハックで、フッターの高さを知る必要があります (ユースケースではうまくいかない場合があります)。

マークアップ

<div class="wrapper">
<div class="content"><p>Page Content</p></div>
<div class="footer-push"></div>
</div>

<footer>
  <p>footer-text</p>
  <img src="http://placekitten.com/100/100" alt="footer image">
</footer>

CSS（まあ、scss）

// our page element

html {
height:100%;
}

body {
height:100%;
}
.wrapper {
background:gray;
min-height:100%;
height: auto !important; // the magic!
height:100%;
margin-bottom:-158px; // the height of our footer + margin
}

.footer-push {
clear:both;
height:158px; // the height of our footer + margin
}

footer {
background:rgba(#a388a3,0.8);
margin-top:20px;
height:138px;
}

ここで重要なことは次のようです。

  • 高さの設定: 含まれる要素 (esphtmlおよびbody)で 100%
  • フッターの高さを把握し、「プッシュ」要素でそれを説明する
  • との組み合わせを使用しmin-height height: auto !importantてheight:100%

それが役立つことを願っています!

于 2012-11-12T18:37:49.723 に答える
0

HTML

<body>
    <div class="example">
        <p>Lorem ipsum dolor sit amet consectetur...</p>
    </div>

    <footer>
        <ul>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
        </ul>
    </footer>
</body>

CSS

body {
    min-height: 100%;
}

footer {
    position: absolute;
    bottom: 0;
}
于 2015-12-07T22:54:24.047 に答える
-2

いいえ、身長の最小値を設定するのは非常に簡単です。

このように: min-height:500px; 最小の高さは 500px です。

于 2012-11-12T18:06:20.483 に答える
-3

min-height プロパティを使用しますが、一部の古いバージョンではサポートされていない可能性があるため、完全に信頼できるわけではありません。差し支えなければ、javascript を入れてください。

于 2012-11-12T18:10:45.090 に答える