Why is my footer not pressed to the bottom?-CodePudding

Why is my footer not pressed to the bottom?

body {
  height: 100%;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.main {
  flex: 1 1 auto;
}

HTML:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <div >
    <header >Header</header>
    <main >Main</main>
    <footer >Footer</footer>
  </div>
</body>
</html>

PS: If you change min-height % to vh then it works. Why is that?

I don't understand why it works like that.

CodePudding user response：

I'm from Poland and I write in the Polish language.

Musi być po prostu 100vh a nie 100%, bo wtedy element nie zajmuje całej wysokości okna przeglądarki, więc element nie będzie wówczas na samym dole, tylko tam, gdzie kończy się element , czyli gdzieś u góry. Dziękuję!

CodePudding user response：

The issue is with the use of min-height property set to 100%. This is telling the browser to set the minimum height of the wrapper div to be 100% of the viewport height, but since the main and header elements are also set to take up space, the footer is pushed down below the fold.

On the other hand, if you change min-height to vh, it works because vh (viewport height) is a unit of measurement that is relative to the height of the viewport and not the parent element. Therefore, it correctly sets the height of the wrapper div to be the full height of the viewport, and since the main and header elements have a flex: 1 1 auto property, they are taking up all the available space and the footer is at the bottom of the viewport.