wordpress sidenav height responsive sorunu

hocalarım 2 tane fotoğraf bırakıyorum buraya bunlar neden bu şekilde genişlikleri tamam ama yükseklikleri neden uyumlu olmuyor bi yolu varmı sabitlemek için ikiside tek div içinde 2 ayrı div
1.resimde konsolu açtığımda oluyor

2.resim normal 1080p

yükseklik daraldıkça css içindeki top değeride geçersizleşiyor çözümü nedir ?

top a % vermişssinizdir kodları atmanız daha mantıklı olur

evet koda % değeri verdim % yerine px değeri versem sorun düzelirmi ?

#Sidenav a {
    top:49%;
    right: -84px;
    color: white;
    width: 110px;
    padding: 12px;
    position:fixed;
    transition: 0.3s;
    font-size: 20px;
    text-decoration: none;
    border-radius: 5px 0 0 5px;
    line-height:1;
    transition: all 0.5s ease;
      opacity:0.7;
    z-index:999;
}
#Sidenav span:first-child {
    display: block;
    float: left;
    z-index: 9999;
    position: relative;
    width: 25px;
    color: #fff!important;
    text-align: center;
    font-size: 18px;
}
#Sidenav span:last-child {
    padding-left:29px;
    position: relative;
}
#Sidenav a:hover {
  right:0;
  opacity:1;
}
#Sidenav i{
  font-size:22px;
  display:flex;
  padding-left:4px;
}

kodların devamı var sidenav2 a adında ondada top:54%

#Sidenav a {
    top:49%;
    right: -84px;
    color: white;
    width: 110px;
    padding: 12px;
    position:absolute;
    transition: 0.3s;
    font-size: 20px;
    text-decoration: none;
    border-radius: 5px 0 0 5px;
    line-height:1;
    transition: all 0.5s ease;
      opacity:0.7;
    z-index:999;
}

position: absolute; olarak dener misiniz?