Is there a way to keep a bar fixed at the bottom of the user's screen, but only within a specific column? Applying position:fixed; bottom:0; stretches the element across the entire screen, so how can I make the bar remain within the column boundaries? Refer to the image for clarification.
https://i.sstatic.net/zWKyi.png
In the provided image, the Like, Comment, Share box should always stay at the bottom of the user's screen while confined within the column it's placed in.
I am currently using Bootstrap 4 for this project. You can view the website here:
EDIT:
HTML code snippet:
<div class='container-fluid user-profile'>
<div class='row'>
<div class='col-md-3 col-12 d-none d-md-block remove-lr-padding' id='sticky-sidebar'>
<div class='row mt-5 mb-5 align-center'>
<div class="col-12">
Some text
</div>
</div>
<div class="row social-module">
<div class="col-4">
Like
</div>
<div class="col-4">
Comment
</div>
<div class="col-4">
Share
</div>
</div>
</div>
<div class='col-md-9 col-12 remove-lr-padding' id='user-map'>
<div class="user-map" id="cesiumContainer"></div>
</div>
</div>
</div>
Associated CSS style:
.social-module {
background-color: blue;
// position:fixed;
bottom:0;
width: 100%;
margin-left: 0;
margin-right: 0;
}
Update 2:
Check out the live demo on Fiddle: https://jsfiddle.net/arel/9t3tnhzt/3/