私は自分のウェブサイトに貼り付けるフッタを作ろうとしていましたが、この場合はjavacriptを使用して特定の理由で要素を作成しました。<footer>
要素を作成し、幅の分解能ごとに完全に下にある。フレックスレイアウトでフッタが完全に下に移動しない
私は本体のみでフッターを追加したいので、これは私のjavascriptです:
$(function() {
$('.products').each(function(i, obj) {
if (i > 0) {
obj.id = "p" + i
var pl = document.createElement("footer");
var t = document.createTextNode(i);
pl.className = "pageblock"
pl.appendChild(t);
document.body.appendChild(pl);
}
});
});
これは、この場合のみ、単一のフッター、および.pageblock
クラスの作品の編集スタイルで、フッターを作成します。
.pageblock {
clear: both;
position: relative;
text-align: center;
bottom: 0;
z-index: 10;
font-family: 'Lato';
font-size: 3em;
color: white;
font-weight: bold;
}
をが、何らかの理由で、それはまだそれがどこか近くの垂直方向の中心で立ち往生されるだろう、機能しません。
が完全にダウンフッターをもたらすために、私はこれを試してみました。 Check for "1" here.私はウェブサイト上でフレックスレイアウトを使用しているため、要素が水平方向に拡大され、垂直方向のサイズが大きくなります。
要素を完全に下に移動できる方法はありますか。垂直方向のサイズが大きくなったり小さくなったりしても常にそこにあるのですか?私はこれを行うことができますコードを破損する可能性があります単一のdivにすべてをラップせずに何らかの方法はありますか?
ありがとう!
相対的な位置決めは、通常のフローでの位置に関して要素を移動するだけです。そして、あなたは 'bottom:0'だけを設定するので、あなたはその位置からまったく移動していません。それがあなたが望むものをどのように達成すると思いますか? – CBroe
+私はスクロールでそれを修正しようとしていないよ、私はそれが完全に底にとどまりたい。 – ShellRox
フレックスボックスを使用してこれを実現するには、単純に1つの方法です:https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/(残りのコンテンツの周りにコンテナ要素を追加する必要があるかもしれませんがすべてを壊すことなく可能でなければなりません。) – CBroe