ここで重要なことは、フッターの高さが固定されないことですが、その内容によって変化します。可変高さのスティッキーフッターを純粋なCSSでどのように定義できますか？
私が「スティッキーフッタ」と言うとき、私は「ビューポートの底部より高いことはないフッタが共通の定義であると理解していますが、十分なコンテンツがあれば隠されますユーザーがそれを見るのに十分遠くまでスクロールするまで」。
また、レガシーブラウザをサポートする必要はありません。 CSS display: table &の関連プロパティがここで役立つ場合、それらは公正なゲームです。
ここに他のすべてのソリューションが古くなっているとJavaScript、またはtableハックを使用しますか。
CSS flex modelの出現により、可変高さのスティッキーフッタ問題を解決することは非常に簡単になります。水平方向にコンテンツを配置することで最もよく知られていますが、Flexboxは実際に垂直レイアウトの問題でも同様に機能します。あなたがしなければならないのは、縦のセクションをフレックスコンテナにラップし、拡張するセクションを選択することだけです。彼らは自動的にコンテナ内の利用可能なすべてのスペースを占有します。
マークアップとCSSがどれほどシンプルであることに注意してください。テーブルハックなど何もありません。
フレックスモデルはsupported by all major browsersで、IE11 +と言われていますが、私のIEはこのスニペットを正しくはまだレンダリングしません。
html, body {
height: 100%;
margin: 0; padding: 0; /* to avoid scrollbars */
}
#wrapper {
display: flex; /* use the flex model */
min-height: 100%;
flex-direction: column; /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}
#header {
background: yellow;
height: 100px; /* can be variable as well */
}
#body {
flex: 1;
border: 1px solid orange;
}
#footer{
background: lime;
}<div id="wrapper">
<div id="header">Title</div>
<div id="body">Body</div>
<div id="footer">
Footer<br/>
of<br/>
variable<br/>
height<br/>
</div>
</div>あなただけで、ビューポートの下にフッターを固執することができます。ただし、コンテンツがあります場合でも、それが見えるようになりますその
position: fixed;
bottom: 0;
。これを防止するために
、あなたには、いくつかのJavaScriptが必要になります。
(window.onscroll = function() {
var foot = document.getElementById('footer');
foot.style.position = "static";
if(foot.offsetTop < document.documentElement.scrollTop + document.body.scrollTop + document.documentElement.offsetHeight - foot.offsetHeight)
foot.style.position = "fixed";
})();
（(...)();ラッパーはそれがあまりにも必要ですので、onscroll機能は、ページのロード時に一度呼び出さなります）
（上記の機能がテストされていませんしかし、動作するはずです - それがない場合、私に知らせて、私は実際のテストページを作ってあげる）
（...）（）;ちょうど自己実行fnですそれはありませんか？ –
はい - 基本的に、スクロールを必要とせずに関数を1回呼び出すことができます。その後、onscrollイベントが発生するたびに関数が呼び出されます。 –
これは間違っていますか？ "（（...（）（ラッパー）は、ページが読み込まれたときにonscroll関数が呼び出されるようにします。これも必要です）。 –
フッターの変数高さは若干の問題が発生しますが、以下は動作するはずです：
<html>
<head>
<style type="text/css">
html { height: 100%; }
body { min-height: 100%; }
.container { min-height: 100%; position: relative; }
.content { padding-bottom: 200px; }
.footer { position: absolute; bottom: 0px; background: #ebebeb; text-align: centre; }
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class="footer">
<p>This is my footer.</p>
<p>This is another line of my footer.</p>
</div>
</div>
</body>
</html>
コンテンツの下部にあるパディングは、フッターがコンテンツと重複しないことを意味します。
<script type="text/javascript">
$(function() {
$(".content").css("padding-bottom", parseInt($(".footer").height() + 20) + 'px');
});
</script>
私はあなたを知っている：しかし、与えられたあなたのフッターには、私は動的に一度のページのロードまたはフッターの高さを変更するたびに、コンテンツの底面にパディングを設定するためにはJavaScriptを使用したい変数のサイズになります純粋なCSSだが、可変の高さと隠れている状態があるという考え方はないと思う。私はこれが最もjavascriptの方法だと思う。
純粋なCSSでこれを絶対に行うことができます。 Clicky the linky.
このコンセプトでは、通常display: blockではなくページのセクションを整理してdisplay: table-cellを使用しています。
HTML
<body class="Frame">
<header class="Row"><h1>Catchy header</h1></header>
<section class="Row Expand"><h2>Awesome content</h2></section>
<footer class="Row"><h3>Sticky footer</h3></footer>
</body>
CSS
.Frame {
display: table;
table-layout: fixed;
height: 100%;
width: 100%;
}
.Row {
display: table-row;
height: 1px;
}
.Row.Expand {
height: auto;
}
サンプルコードに何かがありませんが、これは可能です。 –
あなたは正しいです！私はこれを修正するために私の編集をした、それはあなたのために働いてうれしい！ – cereallarceny
この例では 'table-cell'はありません。あなたは 'テーブル列'を意味しましたか？とにかく、これを行う現代的な方法は、[CSS flexbox model]（https://stackoverflow.com/a/26558049/1269037）を使用することです。 –
新しい（互換性が低い場合）テクニックでこの問題を復活させていただき、ありがとうございます。 A + –
確かに。おそらく最も良い点は、それがうまく劣化することです。 –
これはサファリ8では機能しません。 – Mathias