How to use fixed div so its doesn't overlap with footer?

Question

I have a HTML structure like this

Here i want div3 is fixed. But this is overlapping to footer on scroll like this

but i don't want to overlap my footer with fixed dive.

Can we do anything in css so it remains within continer?

here is jsfiddle: https://jsfiddle.net/b7cjb095/1/

.container{
  border: 1px solid; 
  float:left;
  width:75%;

}
.sidebar {
  border: 1px solid; 
  position:fixed;
  float:right;
  bottom:0;
  width:25%;
  right:0;

}

.footer{
  border: 1px solid;

}
.main {
   min-height: 600px;

}

Thanks

Answer 1

Here is an updated jsfiddle that hopefully fixes your issue. I just adjusted some of the CSS classes and attributes to achieve the desired layout.

Let me know if that helps.

html {
  position: relative;
  min-height: 100%;
}

body { margin-bottom: 60px;}

.main {
  margin: 0;
  padding: 0;
  height: 100%;
}
.container{
  top: 0;
  left: 0;
  border: 1px solid; 
  width: 75%;
  
}
.sidebar {
  position: absolute;
  margin-top: 8px;
  border: 1px solid; 
  float:right;
  top: 0;
  width:25%;
  right: 0;
}

.footer {
  border: 1px solid black;
  position: absolute;
  padding: 5px 5px 30px 5px;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

<div class="main">
<div class="container">
some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrensome conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent e conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrensome conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrensome conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some 
</div>
<div class="sidebar">
some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some conrent some side bar side bar side bar side bar side bar side bar side bar side bar side bar side bar side bar side bar side bar side bar 

</div>

</div>

<div class="footer">

some footer some footer some footer some footer some footer some footer some footer some footer some footer some footer some footer some footer some footer some footer some footer some footer some footer some footer some footer some footer some footer some footer some footer some footer some footer some footer 
</div>

Answer 2

i did it with jquery.You could use something like this:

$(window).scroll(function(){
    if($(this).scrollTop()+$('#Div-3').position().top + $('#Div-3').height() > $('#Footer').position().top)
    //Here u can place code to lock the Div
    //Like Position:Absolute
    //bottom:0
    }
});