How to stop position fixed at footer

Question

 .home{ min-height:100vh; } #sidebar_left { width: 20%; padding: 20px; position: fixed; min-height: 82vh; background-color: #fdfcfd; box-shadow: 0 1px 10px 1px #2680ff6b; margin-left: 6%; display: flex; justify-content: space-around; flex-direction: column; scrollbar-width: none; overflow-x: hidden; overflow-y: scroll; } #footer { background-color: bisque; padding: 5px 0; text-align: center; margin-top: 10px; height:50px; }

 <div class="home"> <div id="sidebar_left"> Content... </div> </div> <div id="footer"> </div>

I'm looking for a solution to the popular issue of stopping a fixed object at the footer of the page.

I basically have a fixed "side-bar" box on the left of the screen and I don't want it to scroll over the footer, so I need it to stop about 10px above the footer. I actually need my sidebar to be fixed while scrolling till the footer comes.

The footer is #footer and it doesn't have a fixed height if that makes any difference.

If someone could assist me in creating a simple solution for this, I'd much appreciate it!

Answer 1

Add additional bottom field in #sidebar_left css

    #sidebar_left {
         ...
         bottom: 10px;
        }

along with it below add footer CSS:

#footer {
  position: relative;
  height: 200px;
  z-index: 1;
}

Answer 2

Enter: position: sticky .

A "sticky" element behaves the same as a fixed element, except it will not leave its parent container. You need to set one of top , left , right or bottom for it to work.

(You might need to view the snippet in full screen to see the effect.)

 .home { min-height: 100vh; } #sidebar_left { width: 20%; padding: 20px; position: sticky; top: 6vh; left: 6%; min-height: 82vh; background-color: #fdfcfd; box-shadow: 0 1px 10px 1px #2680ff6b; display: flex; justify-content: space-around; flex-direction: column; scrollbar-width: none; overflow-x: hidden; overflow-y: scroll; } #footer { background-color: bisque; padding: 5px 0; text-align: center; margin-top: 10px; height: 100px; }

 <div class="home"> <div id="sidebar_left"> Content... </div> </div> <div id="footer"> Footer content </div>

Answer 3

I would go for position: sticky instead. Much better layout control with position: sticky rather than with position: fixed . This positioning property will let the sidebar roam freely inbetween the two adjacent elements (header and footer). Adjust where the sidebar is positioned when scrolling with the top -property.

 .home { min-height: 100vh; }.header { height: 50px; background-color: black; color: white; } #sidebar_left { width: 20%; padding: 20px; position: sticky; top: 0px; min-height: 50vh; /* min-height: 82vh; */ background-color: #fdfcfd; box-shadow: 0 1px 10px 1px #2680ff6b; margin-left: 6%; display: flex; justify-content: space-around; flex-direction: column; scrollbar-width: none; overflow-x: hidden; overflow-y: scroll; } #footer { background-color: bisque; padding: 5px 0; text-align: center; margin-top: 10px; height: 50px; }

 <div class="home"> <div class="header">header</div> <div id="sidebar_left"> Content... </div> </div> <div id="footer"> </div>

Answer 4

Please check this out I made the necessary changes required and added Lorem ipsum in place of sidebar content in order to show a better visual representation if the content in the side-bar increases how does it look.

 .home{ min-height:100vh; } #sidebar_left { width: 20%; padding: 20px; min-height: 82vh; background-color: #fdfcfd; box-shadow: 0 1px 10px 1px #2680ff6b; margin-left: 0.2%; display: flex; justify-content: space-around; flex-direction: column; scrollbar-width: none; overflow-x: hidden; overflow-y: scroll; } #footer { background-color: bisque; padding: 5px 0; text-align: center; margin-top: 10px; height: 50px; z-index: 1; position: sticky; }

 <div class="home"> <div id="sidebar_left"> Content... Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> </div> <div id="footer"> </div>