私のウェブページのいくつかは短いです。これらのページでは、フッターはウィンドウの中央に、フッターの下には空白（白）が表示されます。それは醜いように見えます。私はフッターがウィンドウの一番下にくるようにしたいと思います。限定されたコンテンツ本体はちょうど伸ばされます。ページが短い場合は、ウィンドウの下部にHTMLフッタを置く
しかし、ウェブページが長く、フッタ（またはそのすべて）を見るためにスクロールしなければならない場合、物事は正常に動作するはずです。
CSSでこれを行うにはどうすればよいですか？これを実現するにはJavascript/jQueryが必要ですか？
私はIE9 +と他のブラウザの最新バージョンについてのみ気にします。フッタの高さもページごとに変わる可能性があるので、高さには依存したくありません。
this siteをご覧ください。彼は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;
}
EDIT
フッターの高さは、ページへのページは異なっているので、あなたはフッターの高さを取得し、JavaScriptで#bodyパディング下を調整することができます。 jqueryを使用した例を次に示します。
$(function(){
$('#body').css('padding-bottom', $('#footer').height()+'px');
});
私のフッタの高さを知る必要があるように見えますが、私の状況では非常に難しいかもしれません。 –
いいえ、身長の最低値を設定するのは簡単です。
このように： min-height：500px; の場合、最小高さは500ピクセルです。
私はウィンドウの高さと他の要素についてはわかりません。 –
min-heightプロパティを使用しますが、一部の古いバージョンではサポートされていない可能性があります。あなたが気にしないなら、いくつかのJavaScriptを投げてください。
それは私の問題を本当に解決しません。 –
thisを試してください。
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>
// 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-heightheight: auto !importantとheight:100%希望に役立ちます！あなたが使用したものHTMLとCSS示すことによって、自分自身を助けることができる
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;
}
。 –
フッターはページによって異なるのはなぜですか？ （ただし、それ以来、ページ間のフッターの変更はどれくらい重要ですか？） – Souta