将聊天窗口固定在底部

-1

我正在为其正在进行聊天的项目工作。所有与聊天相关的工作都很好，但是我的问题是，当overflow-y处于活动状态时，我希望聊天窗口固定在底部，因此我不必手动向下滚动即可查看最新消息。（实的东西怎么聊& twitch.tv聊天作品）将聊天窗口固定在底部

（我很抱歉，我不能表现出任何我尝试在做这个，我只是不知道该怎么办。）

谢谢提前。

编辑：这里是一些HTML代码的。

注：实际消息推为字符串登录

// CSS

#chat { 
    margin-top: 110px; 
    background-color: #FAF9FA; 
    height: 75%; 
} 

#chat-window { 
    height: 100%; 
    overflow-y: scroll; 
    overflow-x: hidden; 
}

// HTML

<div class="col-sm-3"> 
    <div id="chat"> 
     <div id="chat-window"> 
      <div id="logs"> 

      </div> 
     </div> 

     <input type="spec" id="message" placeholder="Type your message..."/></br> 
     <button id="send" class="btn">Send</button> 

    </div> 
</div>

来源

2017-10-06 John Doe

你尝试的位置是：固定的风格属性或class css？ –

@GurpreetSingh是的，但这并没有真正的帮助，它确实打破了一切。 –

那么也许你应该尝试修复损坏的部分，而不是找到一个不好的解决方案。位置：固定通常是正确的路线。此外，它独立于任何孩子的溢出或滚动。 –

我不知道如果我明白你的目标，但我认为只是CSS的立场：固定解决你的问题。

.chat-box { 
    position: fixed; 
    background: #ccc; 
    right: 0; 
    bottom: 0; 
    padding: 20px; 
}

例如：https://jsfiddle.net/Julivan/261qjdp9/

希望它有助于

来源

2017-10-06 19:30:19 user827322

那么，如果你的目标是简单地滚动至底部：

window.scrollTo(0, document.getElementById('myChatWindow').scrollHeight);

来源

2017-10-06 19:32:22 justadudewhohacks

将聊天窗口固定在底部

回答

相关问题