Question

我正在开发一个聊天界面，它会以消息浮动的方式显示用户的输入和服务器响应。对话输出可能需要比固定高度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;
;
}

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

Answer 1

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

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

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

滚动选项以及绝对底部位置

1 个答案: