滚动选项与绝对底部位置答案

【问题标题】：Scroll option together with absolute bottom position滚动选项与绝对底部位置
【发布时间】：2017-11-11 21:19:51
【问题描述】：

我正在开发一个聊天界面，该界面将以消息浮动的方式显示用户的输入和服务器响应。对话输出可能需要比固定高度 div 更高的高度，此时我希望在焦点保持在消息上时出现滚动选项出现在该div的底部。与几乎所有消息传递应用程序都非常相似。

当我只使用时：

overflow-y: scroll;

列表与顶部对齐，当文本过多时滚动效果很好。
https://jsfiddle.net/stasov/4pw6sraf/

当我添加应该将列表内容推到底部的“push-to-bottom”类时，滚动停止工作。
https://jsfiddle.net/stasov/q6w4fevg/

html:

<body>
    <div class="leftpane">
        <div class="push-to-bottom">
          <ul>
            <li>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget leo vehicula, commodo risus in, eleifend neque. Aliquam ullamcorper, mauris eget dapibus lobortis, purus ante pellentesque sem, quis bibendum eros lectus id erat. Integer non nibh sed orci consequat congue vel sed nibh. Fusce rutrum diam ut vestibulum dapibus. Aliquam vel ipsum consectetur, pellentesque erat vitae, gravida elit. Nam sagittis lacus id quam sagittis pellentesque. Morbi sit amet purus quis quam congue facilisis ac et tellus. Nullam nec porta velit. Sed pretium risus eu mauris euismod, quis finibus metus congue. Duis at arcu eget mi fermentum elementum. Aliquam lacinia massa laoreet, dignissim lorem non, consectetur orci. Aenean tristique ultricies odio quis tristique.
            </li>
            <li>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget leo vehicula, commodo risus in, eleifend neque. Aliquam ullamcorper, mauris eget dapibus lobortis, purus ante pellentesque sem, quis bibendum eros lectus id erat. Integer non nibh sed orci consequat congue vel sed nibh. Fusce rutrum diam ut vestibulum dapibus. Aliquam vel ipsum consectetur, pellentesque erat vitae, gravida elit. Nam sagittis lacus id quam sagittis pellentesque. Morbi sit amet purus quis quam congue facilisis ac et tellus. Nullam nec porta velit. Sed pretium risus eu mauris euismod, quis finibus metus congue. Duis at arcu eget mi fermentum elementum. Aliquam lacinia massa laoreet, dignissim lorem non, consectetur orci. Aenean tristique ultricies odio quis tristique.
            </li>
          </ul>
        </div>
    </div>

    <div class="rightpane">
      Right pane
    </div>

  </body>

CSS：

.leftpane {
    width: 40%;
    float: left;
    background-color: LightBlue;
    height: 500px;
    max-height: 500px;
    overflow-y: scroll;
    position: relative;
}

.push-to-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
}

.rightpane {
  width: 60%;
  height: 500px;
  max-height: 500px;
  position: relative;
  float: right;
  background-color: Beige;
;
}

也许我正在寻找的布局无法通过上述方式实现。任何想法将不胜感激。

【问题讨论】：

Scroll Automatically to the Bottom of the Page的可能重复

标签： html css scroll absolute

【解决方案1】：

删除leftpane中的第一个div并将这些规则添加到leftpane

.leftpane {
  display: flex;
  flex-direction: column-reverse;
}

工作示例：https://jsfiddle.net/dy2j4gdu/1/

【讨论】：

魔术！谢谢。