將項目推到其父項底部，不重疊？

我有一個元素至少在整個視口中垂直延伸（最小高度爲100vh）。這個元素有兩個孩子，一個菜單項（基本上是一個鏈接的格式化列表）和另一個元素。將項目推到其父項底部，不重疊？

我想後者元件推到母體一個的底部，不重疊的菜單，跨分辨率的變化。

現在我使用的位置絕對解決方案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>

你會怎麼做，以紅色元素推到父「黃」一個底部，不重疊的菜單嗎？

謝謝！

來源

2016-09-25 Phyks

它看起來像你想要一個列表，可以包含不確定數量的項目，但你想紅色框是一個固定的大小。那是對的嗎？如果視口足夠短以使它們重疊，那麼您想在紅框中發生什麼？紅箱子應該變小嗎？該列表是否應該與該框重疊？這兩個項目是否應保持其高度並在整頁上進行垂直滾動？ – squarecandy

這很容易，如果你使用的是父容器上的flexbox：

爲red部分刪除絕對定位。
將display: flex添加到pushBottom並使用flex-direction: column垂直彎曲。
使用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>

檢查了這一點，讓我知道你對這個意見。謝謝！

來源

2016-09-25 02:32:19 kukkuz

@Phyks請讓我知道如果這解決了你的問題......謝謝！ – kukkuz

是的，它完美匹配我的使用案例！謝謝！ – Phyks

將項目推到其父項底部，不重疊？

回答

相關問題