Я хочу, чтобы мой side-nav можно было прокручивать при превышении height (550px). Я сделал его всегда по центру по вертикали. Но когда экран height меньше 550px, я могу прокручивать, но не полностью. Потому что он должен иметь margin немного от top.
Здесь вы можете увидеть 
Два из этих значков на top не видны и недоступны.
После 550px height я пытался дать верхнее поле с точки зрения vh, но не сработало.
@media only screen and (max-height: 550px) {
.menu {
margin-top:30vh;
}
}
Мне нужно чтобы вычислить эту вершину динамически, но как? Я мог бы sh, я мог бы использовать calc() функцию, но, как я знаю, это только для width и height чувствительных вычислений.
*,*::after,*::before{
margin:0;
padding:0;
box-sizing: border-box;
}
html,body{
font-size:62,5%;
background-color: #000 ;
}
body{
box-sizing: border-box;
}
.vertical-center {
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.responsive {
max-width: 100%;
height: auto;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.imgContainer{
overflow: hidden;
border: 4px solid yellow;
}
.menu{
margin: 0;
position: absolute;
top:50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 5px;
background-color:#fff;
padding:10px;
height: auto;
width: fit-content;
}
.myIcon{
margin-bottom:20px;
font-size:40px;
color:#000;
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
<link rel="stylesheet" href="css/icon-font.css">
<link rel="stylesheet" href="/styles.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
</head>
<body>
<div class="menu" >
<a href=""><i class="ion-crop myIcon"></i></a>
<a href=""><i class="ion-android-color-palette myIcon"></i></a>
<a href=""><i class="ion-android-contract myIcon"></i></a>
<a href=""><i class="ion-android-options myIcon"></i></a>
<a href=""><i class="ion-android-sync myIcon"></i></a>
<a href=""><i class="ion-contrast myIcon"></i></a>
<a href=""><i class="ion-ios-analytics myIcon"></i></a>
<a href=""><i class="ion-ios-color-wand myIcon"></i></a>
</div>
<img src="https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Nature" class="responsive">
</body>
</html>