responsive height with padding on page - html

Question

I'm trying to achieve an example as shown on this site. Click on the "Projects" button on the top right corner below the main menu to reveal the container I am interested in replicating.
When stretching the webpage from left to right and top to bottom, that project pop up is responsive and the padding around the page keeps the same value. I was able to get my width responsive but cannot figure out how to get the same thing for my height since I don't have a specific value for my height. I want the box in my site to be responsive on bigger computer screens than what I am using right now (15" macbook pro) because right now it only takes up half the screen on a bigger monitor.
Here's my code:
nav {
/* max-width: 1266px; */
width: 87.92%;
margin: 50px auto 23px auto;
height: 40px;
background-color: pink;
}
.content {
/* width: 1266px; */
width: 87.92%;
height: 540px;
margin: 0px auto 0px auto;
background-color: aquamarine;
}
<nav>
</nav>
<div class="content">
</div>
Try here.
I want there to have 50px padding at the top and bottom of the webpage even as you shrink the page top to bottom. Right now my nav has a margin-top of 50px, but ideally, I'd like the entire page to have a padding of 50px at the top and bottom. I just don't know how to go about this and I can't seem to find an answer anywhere!
Thank you!!

Answer 1

You can use calc() for this:
height: calc(100vh - 163px);
100vh = total height of screen
163px = 113px + 50px
(113px is the height of your nav with margins and 50px is the distance to the page bottom)

Answer 2

There are several ways to do. One way is to use fixed or absolute positioning. The page http://kokopako.fr/profile fixes the position. Notice that the body in that page no longer scrolls when the Projects menu is open. This is something you need to enable using JavaScript.
So, imagine originally the body is tall and only the navigation is visible at the top:
body {
height: 1900px;
}
nav {
height: 40px;
background-color: pink;
width: 87.92%;
margin: 50px auto 23px auto;
}
.content {
background-color: aquamarine;
display: none;
}
Then when you click no "Projects" button, you would add an extra class, say projects_visible to body so that it doesn't scroll.
.projects_visible {
overflow: hidden;
}
Then the navigation and the content would display automatically with fixed position.
.projects_visible nav {
position: absolute;
top: 50px;
right: 50px;
left: 50px;
margin: 0;
}
.projects_visible .content {
display: block;
position: absolute;
bottom: 50px;
top: 123px;
right: 50px;
left: 50px;
}