How to stop position fixed at footer-CodePudding

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.

Here's the HTML for the side-bar box:

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

Here's the CSS for the side-bar

#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;
}

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!

CodePudding user response：

Try this:

#sidebar_left {
    width: 20%;
    padding: 20px;
    position: relative;
    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;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
  <body>
    <div >
      <div id="sidebar_left">
        Content...
      </div>
    </div>
    <div id="footer">
       <h3>Footer</h3>
    </div>
  </body>
</html>

CodePudding user response：

Add additional bottom field in #sidebar_left css

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