Footer Always at The Bottom

How to keep footer at the bottom of the page

HTML File

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div>
      <header>header content</header>
      <main>main content</main>
    </div>
    <footer>footer content</footer>
  </body>

</html>

CSS File

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
}