Make footer stay at the bottom of the page layout in css

https://webdevfix.com/make-footer-stay-at-the-bottom-of-the-page-layout-in-css

Tech:

Css

Since:

1 year ago

Views:

2

One of the simple way to make the footer of the page stick to bottom is using flexbox.

Html

<body>
  <header>Header</header>
  <section>Content</section>
  <footer>Footer</footer>
</body>

Css

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
footer {
  margin-top: auto;
}

Output: With less content

Output: With Scrollable content

More Articles

CSS Background - 10 Properties and its Values (Reference)

CSS Font - 11 Properties and its Values (Reference)

CSS Text - 11 Properties and its Values (Reference)

CSS Flex - 13 Properties and its Values (Reference)

CSS Functions - 14 Functions (Reference)