使用滚动将 child 定位在 parent 的底部

Question

我想将 child div 放置在其 parent 的非常底部。通常，我知道这可以使用 position: absolute; bottom: 0; 来完成 - 但是，这会将 child 放置在视图的屏幕底部，但我的页面有 overflow-y，因为height: 1000px;（即内容在下方滚动），它是 this，我希望 parent 位于底部（以便仅可见当你向下滚动到最底部时）。

这是我在 codepen 上的问题的一个非常简单的例子。

http://codepen.io/anon/pen/qdmowK

Answer 1

您需要相对于父元素定位元素

在您的情况下，这意味着将 position: relative; 应用于父项。

#center {
  flex: 3;
  background-color: pink;
  position: relative;
}

#child {
  outline: 5px solid yellow;
  position: absolute;
  bottom: 0;
}

Codepen Demo

Answer 2

http://codepen.io/anon/pen/wadjvK

#header {
  width: 100%;
  height: 200px;
  background-color: red;
}

#content {
  display: flex;
}

#left {
  height: 1000px; /*Sets height for #center, #right*/
  flex: 1;
  background-color: blue;
}


#center {
  flex: 3;
  background-color: pink;
   position:relative;
}

#child {
  outline: 5px solid yellow;
position:absolute;
    bottom:0;
}

#right{
  flex: 1;
  background-color: green;
}

使用滚动将 child 定位在 parent 的底部

Positioning child at bottom of parent with scroll

html

css

containers

parent