Margin-top grows with smaller width

Question

I have a box with a margin-top (relative to the top of the page) that gets smaller with the browser window (using vw).
But the header of the page (fixed and in a different z-index) is restricted with a min-width, so when it reaches the 1000px I need the box margin-top to stop getting smaller and star getting bigger... Like the smaller the windows gets, the bigger the margin-top is...
This is the box... and now i need to create a @media screen and (max-width:1000px) where it says that the height gets bigger relative to the vw.

#box {
position: relative;
float: left;
width: 100%;
height: auto;
min-height: 350px;
margin-top: 5vw;
}

Answer 1

You can do something like this using calc()

Fiddle

header {
  background: black;
  height: 50px;
  width: 100%;
}

main {
  background: green;
  margin-top: 10vw;
  height: 100vh;
}

@media(max-width: 768px) {
  main {
     margin-top: calc(150px - 10vw);
  }
}

<div class="container">
  <header></header>
  <main></main>
</div>