CSS To Position Footer always at the bottom but not Fixed or Sticky

CSS To Position Footer always at the bottom but not Fixed or Sticky

CSS To Position Footer always at the bottom but not Fixed or Sticky

In this lesson, you will learn how to design a Footer that can always be positioned at the bottom of the page even if the content above it is too short.

If the content above is taller than the viewport, the footer will rest at the bottom of the page but it will not become sticky or fixed.

Join this channel membership and get every project code from the community tab.
Join now at    / @sirchogyal  

❀ Buy books from the affiliate links below:
▶HTML and CSS QuickStart Guide: https://amzn.to/3Jl6hjJ
▶Web Design with HTML, CSS, JavaScript \u0026 jQuery Set at https://amzn.to/3uGkG6k
▶learn JavaScript Quickly: https://amzn.to/3uB7Q9n

❀ Merch: https://my-store-6057984.creator-spri…

❀ Visit my blog at http://v815.blogspot.com

❀ Join me on Telegram: https://telegram.im/@code8home

▶️ Subscribe to this channel for more videos.


Content

0.789 -> In this lesson, we are gonna design a Footer that can always be positioned at the bottom
5.45 -> of the page even if the content above it is too short.
9.402 -> If the content above is taller than the viewport, the footer will rest at the bottom of the
15.019 -> page but it will not become sticky or fixed.
18.294 -> Hey everyone!
19.13 -> It's me Chogyal.
20.13 -> If you are new here, please consider subscribing so that you will be notified as I release
24.45 -> my new videos.
26.946 -> We have here the .
29.692 -> Then we have tag.
31.84 -> Inside the tag, we have tag.
34.84 -> Inside the tag, create tag.
38.13 -> Let's keep the title name as Footer Position.
42.178 -> Just below the tag, create tag where we can write the CSS later.
48.632 -> Next, create tag.
50.47 -> Inside the tag, we have tag.
53.739 -> Inside the tag, create tag.
56.34 -> Inside the tag, let's type Sample Website.
67.88 -> We will create here three paragraphs with lorem texts.
71.85 -> So we have here p times 3 which means it will create three tags.
77.784 -> Inside each of those tags, there will be the lorem texts.
82.841 -> Now hit enter on your keyboard.
88.782 -> Create here tag.
90.65 -> Inside the tag, type Copyright © Then create here a tag where we can
99.42 -> write a simple javascript for an auto year.
103.902 -> We have here document.write(new Date().getFullYear()).
113.39 -> After the auto year, you can add your website name, okay.
121.685 -> Now will style this tag.
125.787 -> We have here margin-top: 0;
128.819 -> Style the tags.
133.149 -> We have here font-size: 18px; and text-align: justify;
139.617 -> Style the tag.
144 -> We here the width: 80%; margin: 0 on top & bottom, auto on left & right; and padding-top: 32px;
159.33 -> For footer, we have the background: greenyellow; font-size: 18px; padding: 35px; text-align:
167.09 -> center; position: absolute; right: 0; left: 0; and bottom: 0;
176.864 -> Now the footer has been placed at the bottom of the page.
180.379 -> However, if we increase the content there is a problem.
187.359 -> Let's increase the content.
192.183 -> The problem here is that as we scroll the page, the footer gets stuck on the content.
197.926 -> So let's fix this.
199.982 -> Style the tag.
201.866 -> We here the position: relative; margin: 0;
215.421 -> Set the html height to 100% and then set the min-height of the body to 100%.
226.239 -> Let's increase the space below the content.
231.318 -> Add here padding-bottom: 6.74rem;
237.207 -> The footer looks okay now but if we reduce the content there is a small problem.
244.108 -> Let's reduce the content.
252.822 -> The footer has been placed at the bottom of the page.
255.753 -> However, even if the content is small, we have to scroll the page a little bit, to view
259.772 -> the footer at the bottom.
261.83 -> To fix this, we have to add the box-sizing property to the html and body.
267.314 -> For html, add box-sizing: border-box and for body, add box-sizing: inherit
274.622 -> Now we don't have to scroll the page when the content is small.
278.41 -> This is how you can place the footer always at the bottom of the page without being sticky
282.93 -> or fixed.
284.482 -> That's it.
285.422 -> If you have any doubt, do let me know in the comment section below.
288.636 -> Please like, share, and subscribe to this channel so that you will help me to reach
291.967 -> this video to more people who need it.
295.03 -> Thanks for watching!
296.12 -> Stay technically sound.

Source: https://www.youtube.com/watch?v=J-r75L3Tflg