Sidebar height match section height

https://pelican-mayflower-36wy.squarespace.com/

Password: Lincoln22

Hi!

I'm taking over a site that had some existing code.  There are certain pages that have sidebar navigation.  Each page the side bar is either too short, or overlapping the footer.  The client would like the sidebar to be the same height as the section.  Starting at the top, and ending at the footer.

I've tried a few different code adjustments and can't seem to find one that works.

Is there a way to stop the sidebar at the footer or fix the height for each section?  You can see from the photo how the sidebar overlaps the footer.

Thanks!!
Blayne

In CSS box, there is a CSS like this, I think in CSS box, it show different. Can you take a screenshot?

Hi @tuanphan,

This is the full CSS:

//sidebar
  #block-yui_3_17_2_1_1652426977679_38936 {
    .sidebar {
  position:relative;
  background:#7B7D81;
  min-height:calc(150vh-150px);
  padding-top:100px;
      padding-bottom: 100px;
  @media @mobile{
      height:auto;
      padding:20px;
    border-radius:3px;
    }
  h4{
    color:#fff !important;
    z-index:999;
    position:relative;
  }
  ul{
    position:relative;
    padding:0;
    list-style:none;
    li{
      margin:5px 0;
      a{
        font-weight:500;
        transition: all ease-in-out 150ms !important;
        -webkit-transition: all ease-in-out 150ms !important;
        -moz-transition: all ease-in-out 150ms !important;
        -ms-transition: all ease-in-out 150ms !important;
        color:#fff;

        &:hover{
          color:#FDD505;
          font-weight:600;
          i{
            opacity:0.5;
          }
        }
      }
    }
  }
  &:before{
      position:absolute;
      content:'';
      width:200%;
      height:150%;
      background:#7B7D81;
      top:-20%;
      right:0;
    @media @mobile{
      display:none;
    }
  }
}
}

Try changing this line

 min-height:calc(150vh-150px);

to this

 min-height:calc(~"150vh-150px");