Bootstrap Snippet Scroll a Div to bottom using Jquery Animate2 using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Hello, world!</title>
  </head>
  <body>
   <div id="chatwindow">
 <div id="messagewindow">
    <p>Daniel wrote: Great party yesterday</p>
    <p>Alex wrote: stil hungover</p>
    <p>Chris: great party? nah.</p>
    <p>Sam: what party</p>
    <p>jenny: partytime!</p>
    <p>Daniel wrote: Great party yesterday</p>
    <p>Alex wrote: stil hungover</p>
    <p>Chris: great party? nah.</p>
    <p>Sam: what party</p>
    <p>jenny: partytime!</p>
    <p>Daniel wrote: Great party yesterday</p>
    <p>Alex wrote: stil hungover</p>
    <p>Chris: great party? nah.</p>
    <p>Sam: what party</p>
    <p>jenny: partytime!</p>
    <p>Daniel wrote: Great party yesterday</p>
    <p>Alex wrote: stil hungover</p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#chatwindow{
    position:relative;
    height:400px;
    margin:10px;
     padding:.5em;
}
#messagewindow, #inputcontainer{
    position:absolute;
    left:1vw;
    right:1vw;
    border:1px solid #000;
    padding:.5em;
}
#messagewindow{   
    overflow:auto;
    top:0;
    bottom:3em;
}
#inputcontainer{
    display:block;
    bottom:0;
    height:1em;
    padding:.5em;
    margin-top:1em;
}
#inputcontainer > p{
    margin:0;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Scroll a Div to bottom using Jquery Animate2"
Bootstrap 4.1.1 Snippet by Biplab01198

Related: See More

Questions / Comments:

"Scroll a Div to bottom using Jquery Animate2" Bootstrap 4.1.1 Snippet by Biplab01198

Related: See More

Questions / Comments:

"Scroll a Div to bottom using Jquery Animate2"
Bootstrap 4.1.1 Snippet by Biplab01198