Make Div Stay At Bottom of Page'S Content All the Time Even When There Are Scrollbars

Make div stay at bottom of page's content all the time even when there are scrollbars

This is precisely what position: fixed was designed for:

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Here's the fiddle: http://jsfiddle.net/uw8f9/

how to set a div in bottom of page

use fixed footer

footer{
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align:center;
  margin:0 auto;
}

<footer>
  <div>
    <a href="https://stackoverflow.com/users/14248176/achyuta-pataki"><img src="https://image.flaticon.com/icons/png/128/2111/2111628.png" height="40px" width="40px"></a>
     
    <a href="https://github.com/achyutap"><img src="https://image.flaticon.com/icons/png/128/2111/2111432.png" height="40px" width="40px"></a>
     
    <a href="mailto:amp@gmail.com"><img src="https://image.flaticon.com/icons/png/128/732/732200.png" height="40px" width="40px"></a>
  </div>
</footer>

How to make footer div always be at the bottom of page content

You need a set height into body,html tag.

Then you need a absolute position into #footer tag

For example like this:

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* adjust to footer height */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* height of the footer */
   background:#6cf;
}

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

Making an image stay at the bottom of the page but not go over content

What I would use is a wrapper (in this example with the class container) that has a display of flex. The children (a list and your image) should be on the vertical axis, therefore use flex-direction: column; so your main axis is vertical. And because you want your first child (your list) at the beginning and your last child at the end (your image) you can use justify-content: space-between;. This will distribute your items evenly, with your first item at the start and last item at the end. Flex may be hard to understand at first, but it is very powerful. Some information that might help:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
and https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

Here's an example of what I wrote about (open in a full page and resize to see the effect):

html,
body {
  height: 100%;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  /* You can leave this out or change it to 100% depending on your situation*/
  width: 300px;
}

<div class="container">
  <ul>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
  </ul>
  <img src="https://www.placecage.com/300/200" alt="">
</div>

Bootstrap 3 grid make panel stay on bottom right corner and scrollable div

Is that what you want?

.wrap {
    width: 100%;
    height: 150px;
    border: 1px solid #cccccc;
    display: flex;
}

.column {
    width: 50%;
}

ul.column {
    border-left: 1px solid #cccccc;
    height: 100%;
    overflow: auto;
    padding: 0;
    margin: 0;
    list-style: none;
}

ul li {
    height: 40px;
    background-color: aquamarine;
    margin: 10px;
}

ul .last {
    background-color: orange;
    position: sticky;
    bottom: 5px;
    box-shadow: 0 0 10px;
    margin-bottom: 50px;
}

<div class="wrap">
    <div class="column"></div>
    <ul class="column">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li class="last"></li>
    </ul>
<div>

Keep overflow div scrolled to bottom unless user scrolls up

This might help you:

var element = document.getElementById("yourDivID");
element.scrollTop = element.scrollHeight;

[EDIT], to match the comment...

function updateScroll(){
    var element = document.getElementById("yourDivID");
    element.scrollTop = element.scrollHeight;
}

whenever content is added, call the function updateScroll(), or set a timer:

//once a second
setInterval(updateScroll,1000);

if you want to update ONLY if the user didn't move:

var scrolled = false;
function updateScroll(){
    if(!scrolled){
        var element = document.getElementById("yourDivID");
        element.scrollTop = element.scrollHeight;
    }
}

$("#yourDivID").on('scroll', function(){
    scrolled=true;
});

position an element at bottom of the visible space while scrolling

Simply use position: fixed in conjunction with your bottom: 0:

.main {
  height: 1430px;
  background-color: red;
}

.bottom {
  position: fixed;
  bottom: 0px;
  background-color: green;
}

<div class="main">main content <br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3</div>

<div class="bottom">bottom</div>

Make Div Stay At Bottom of Page'S Content All the Time Even When There Are Scrollbars