フレックスレイアウトでフッタが完全に下に移動しない

Question

私は自分のウェブサイトに貼り付けるフッタを作ろうとしていましたが、この場合は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にすべてをラップせずに何らかの方法はありますか？

ありがとう！

Answer 1

は、それはあなたのフレックスのセットアップとhtmlなしで必要なものを正確に伝えることは非常に困難ですが、あなたのアプリケーションが許可されていれば勘に、あなたはおそらく

html, body { 
    min-height: 100%; 
} 

を必要としています。あなたのフレックス要素は、コンテンツの高さであるボディの高さに垂直に伸びているので、フッターはすでに底部にあります。最小の高さを100％に設定すると、htmlとbodyがウィンドウの高さに設定され、要素を適切に伸ばし、フッターを下に投げます。