Can not get footer down to buttom

Im using Angular but i dont think it would matter because this is pure html and css

I have tried to use flexbox on body techniqe and margin-top: auto on the footer
but it did not work.

I can either make it work by giving the Footer a Position: absolute; bottom: 0px
wich does make it stick to the bottom but it will also overlap the content and the navbar if i make the window smaller.

if i do Position: relevant; it will just float in the middle.

So what do i do?

footer{
  width:100%;
  margin-top:auto;
}

also tried

width:100%;
position: absolute;
bottom: 0px


body{
  display: flex;
  flex-direction: column;
  min-height: 100%; //I also tried min-height:100vh and height 100% and height 100vh
}

html

<html>
<body>
  <nav></nav>
  <div class="container"></div>
  <footer></footer>
</body>
</html>