Body does not spread to 100% of the page´s height

Question

I am trying to make my footer go to the bottom of the page. The problem is that the body is not taking 100% of the page´s height, that is why the footer cannot go to the bottom (at least this is what I think is happening). Has to be a beginner problem, sorry for asking cause for sure it has been asked before.

Any help would be appreciated, thanks!

body {
  min-height: 100%;
}
body {
  background: radial-gradient(
    at top left,

    #403b4a 0%,
    #e7e9bb 100%
  );
  background-repeat: no-repeat;
  min-height: 100%;
  display: flex;
  flex-direction: column;

actual view of the body

Answer 1

Maybe it has to do with the structure of my project? Here is where my navBar, content and footer are placed:

export default function Layout({ children }) {
  return (
    <div className="layout">
      <Navbar />
      <div className="content">{children}</div>
      <footer>
        <p>Copyright 2022 Simon Criado</p>
      </footer>
    </div>
  )
}

Answer 2

You can try something like that. I added justify-content: space-between; to the body, which will allow the elements to be pushed apart with flex.

html,
body, 
.layout,
#app {
  height:100%;
}

.layout{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.content{
  flex: 1;
}

<div class="layout">
  <div>Navbar</div>
  <div class="content">Your content</div>
  <div>Footer</div>
 </div>

Answer 3

Try using

body {
  min-height: 100vh;
}