絶対配置なしの最下部のCSS配置

Question

絶対配置を使用せずに常に要素の下位にあるように要素を配置するにはどうすればよいですか？ 私は2つの要素を含むコンテナを持っており、そのうちの1つはテキスト記述なので、テキストと同じ大きさにすることができます。前のdivのテキストが空であるかどうかにかかわらず、ページの一番下に2番目の要素を配置したいと思います。テキストが空でない場合、それらの間に10pxのパディングを入れたいと思います。

Answer 1

更新：あなたのコードに適用flexboxと JSFiddle。

https://jsfiddle.net/ec7qxtfr/1/

flexboxあなたがこれを達成するのを助けることができます。親コンテナに以下を追加します。

.container { 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
} 

次にビットは10pxのパディングです。これは、コンテナ内の最初の子要素を対象とします。

.child:first-child { 
    padding-bottom: 10px; 
} 

限り、最初の子divは、あなたが任意のコンテンツ（なし段落）を持っていない場合でも、存在するとして、二divはまだflexboxへのコンテナのおかげの下にプッシュされます。同様に、プロパティをコメントアウトして、paddingが2つの子要素の間に存在することを確認できます。

下記のJSFiddleをご覧ください。親コンテナの高さを調整して、2番目のdivがコンテナの底にとどまることを確認できます。

https://jsfiddle.net/o3r40keu/5/

注：このソリューションは、あなただけのこの特定の親コンテナ内の2つのつの子要素を持つことになりますと仮定します。

こちらがお役に立てば幸いです。

Answer 2

フレックスボックスを使用できます。 あなたはその後、autoに子供のマージントップを設定することができ

.container-class { 
    display: flex; 
    flex-direction: column; 
} 

にコンテナを設定した場合。

.child { 
    margin-top: auto; 
} 

HTMLは次のようになります。

<section class="container-class"> 
    <p class="child">...</p> 
</section> 

あなたは仕事に、このためのコンテナに一定の高さを設定する必要があるかもしれませんが、解決策の要旨はフレキシボックス+マージントップを使用しています：あなたが底にくっつくようにしたい要素の上で自動。 あなたが達成したいパディングや他のスタイルは、期待どおりに動作するはずです。あなたのフレキシボックスの小道具の前に付ける必要があります

注、すなわち：

display: -webkit-box; 
display: -ms-flexbox; 
display: flex; 
-webkit-box-orient: vertical; 
-webkit-box-direction: normal; 
    -ms-flex-direction: column; 
     flex-direction: column;