Question

我想在其父级的非常底部放置一个子div。通常情况下，我了解这可以使用position: absolute; bottom: 0;完成 - 但是，这会将孩子置于视图中的屏幕底部，但我的页面有溢出，如height: 1000px;（即内容在下面滚动），并且这个我希望父母位于底部（这样只有当你向下滚动到最底部时它才可见）。

这是我在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;
}

使用滚动将孩子定位在父母的底部

2 个答案: