年齢の問題です。私は<footer>要素をページの下部に配置する必要があります。しかし、私はラッパーdivを持っていません。CSS＆HTML5：<footer>をページの下部に配置しますか？ラッパーはありませんか？
Iよ次stucture ...
<body>
<header>
<section id="content">
<footer>
</body>
私の知る限り、これはまだページの一番下に固執するフッターを取得するための最良の方法である：
position: fixed; bottom: 0, height: xxxとしますか？もちろん、ページが実際にウィンドウの一番下を過ぎると、コンテンツは重なってしまいます。おそらくいくつかのJSは "短い"コンテンツを検出し、適切なCSSを設定します。
これまでにjsfiddleを作成していましたが、これをチェックしてください。コンテンツがオーバーフローすると、スクロールが表示されます。
あなたのコードに応じて、これは動作しないかもしれないが、私はあなたのbodyを設定することをお勧めしたいですposition:relative;に設定し、次にfooterをposition:absolute;とbottom:0に設定します。理論的にはそれは物事を重複させません。
の高さに等しい内容で下マージンを設定します。ありがとうございました！ – Riwels
この質問は私が投稿したものを投稿すると考えていました。私には理想的な方法のようです。
CSS：
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
HTML5：
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<nav></nav>
<article>Lorem ipsum...</article>
<footer></footer>
</body>
</html>
私のために働いた - ありがとう！ – user949300
私はこのオプションが大好きです。とても素敵です。また、ブートストラップを使用している場合、 '.footer'クラスと' footer'要素を混同しないように注意してください。 – Jess
に行くFiddle
をチェックHTML
<header>
</header>
<section id="content">
</section>
<footer>
</footer>
CSSここで
body {
height: 100%;
}
footer {
width: 100%;
height: 200px;
}
jQueryの
$(function() {
var footer = $('footer'),
footHgt = $('footer').outerHeight(),
bodyHgt = $('body').height();
footer
.css({
position: 'absolute',
left: '0',
top: bodyHgt - footHgt + 'px'
});
$(window).resize(function() {
var footer = $('footer'),
footHgt = $('footer').outerHeight(),
bodyHgt = $('body').height();
footer
.css({
position: 'absolute',
left: '0',
top: bodyHgt - footHgt + 'px'
});
});
});
は私にとって素晴らしい作品なソリューションです。ボトムに粘着し、内容と重なり合わず、ラッパーが不要です。
https://jsfiddle.net/vq1kcedv/
HTML：
<!DOCTYPE html>
<head>
<title>Footer</title>
</head>
<body>
<nav>Link1 Link2</nav>
<article>content</article>
<footer>Copyright</footer>
</body>
</html>
CSS：
html, body {
position: absolute;
width: 100%;
min-height: 100%;
padding: 0;
margin: 0;
}
body:after {
line-height: 100px; /* height of footer */
white-space: pre;
content: "\A";
}
footer {
position: absolute;
width: 100%;
height: 100px; /* height of footer */
bottom: 0px;
margin-top: -100px; /* height of footer */
}
私のために働いた。ありがとう:) – boca
私はそれが古いポストを知っているが、私は（JavaScriptで）自分のソリューションを提供したかった：
/* css */
footer { width:100%; bottom:0; }
/* javascript */
if ($("body").height() < $(window).height()) {
document.querySelector('footer').style = 'position:absolute;'
}
どんなサイズのフッタでも動作するはずです。
EDIT：代替ソリューション（CSSは必要ありません）：
/* footer */
if ($("body").height() < $(window).height()) { /* if the page is not long enouth, let's put some more margin to the footer */
var height = $(document).height() - $("body").height();
document.querySelector("footer").style.marginTop = height + "px";
}
ただこれは私には正常に動作しているフッター – Jan