滚动选项连同绝对底部位置

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

也许我正在寻找可以不受上述实现布局。任何想法将不胜感激。

来源

2017-11-11 Stasv

可能的复制（https：//开头计算器。 com/questions/11715646 /自动滚动到页面底部） – lumio

删除第一个DIV中leftpane并添加这些规则leftpane

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

工作例如：自动滚动到页面底部]的https://jsfiddle.net/dy2j4gdu/1/

来源

2017-11-11 13:19:51

魔法！谢谢。 – Stasv

滚动选项连同绝对底部位置

回答

相关问题