アイテムを親の下に重ならないようにプッシュしますか？

Question

少なくとも、ビューポート全体を縦方向に（最小高さ100vh）延長した要素があります。この要素には、メニュー項目（基本的にリンクの書式設定されたリスト）と別の要素の2つの子要素があります。

私は後者の要素を、解像度の変更を超えてメニューをオーバーラップさせずに、親要素の下にプッシュしたいと思います。

今のところ私はポジションアブソリュートソリューションhttps://codepen.io/anon/pen/WGpyYaを使用しています。しかし、それは "赤"要素がいくつかの構成でメニューをオーバーラップすることができます。

HTML & CSSコード：

* { 
 
    margin: 0; 
 
} 
 
.parentContainer { 
 
    min-height: 100vh; 
 
    background-color: yellow; 
 
    position: relative; 
 
} 
 
.pushBottom { 
 
    width: 200px; 
 
    height: 300px; 
 
    background-color: red; 
 
    position: absolute; 
 
    bottom: 0; 
 
}

<div class="parentContainer"> 
 
    <ul> 
 
    <li>foobar</li> 
 
    <li>foobar</li> 
 
    <li>foobar</li> 
 
    </ul> 
 
    <div class="pushBottom"> 
 
    </div> 
 
</div>

どのようにメニューを重ねずに、一つの "黄色" の親の下に赤の要素をプッシュするだろうか？

ありがとうございます！あなたが親コンテナにflexboxを使用している場合は

Answer 1

これは簡単です：

1. はredセクションの絶対位置を削除します。

2. pushBottomにdisplay: flexを追加し、flex-direction: columnを使用して縦方向に曲げます。

3. justify-content: space-betweenを使用すると、すべてのディスプレイサイズの下にpushBottomが表示されます。

* { 
 
    margin: 0; 
 
} 
 
.parentContainer { 
 
    min-height: 100vh; 
 
    background-color: yellow; 
 
    position: relative; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
} 
 
.pushBottom { 
 
    width: 200px; 
 
    height: 300px; 
 
    background-color: red; 
 
}

<div class="parentContainer"> 
 
    <ul> 
 
    <li>foobar</li> 
 
    <li>foobar</li> 
 
    <li>foobar</li> 
 
    </ul> 
 
    <div class="pushBottom"> 
 
    </div> 
 
</div>

このアウトをチェックして、私はこれについてあなたの意見を知ってみましょう。ありがとう！