What is the best way to keep a <div> class anchored to the bottom of an HTML page?

Question

What is the best way to keep a <div> class anchored to the bottom of an HTML page?

I am looking to incorporate a footer into my website that stays fixed at the bottom of the screen. However, I have encountered an issue:

Here is what I have attempted so far:

.footer {
    position: absolute;
    width: 100%;
    background: #0084FF;
    color: #fff;
    padding: 25px;
    margin-top: 0px;
    margin: 0px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    z-index: 99999;
}

The problem arises when I apply this CSS - the footer is fixed at the bottom, but part of the content within my div (specifically on the right side) gets cut off from the screen. Removing the padding only makes the design look worse. Are there any alternative methods for achieving this?

NOTE: I believe sharing the HTML code for the specific div is unnecessary as it does not contain anything special related to the footer's structure.

html css

Answer 1

Answer №1

Have you experimented with using box-sizing: border-box;?
For more information, check out the documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Below is an example (use the [<>] button to test it out in your post!).

I included position: fixed; and bottom: 0; in this example to enhance its appearance, but feel free to customize it as needed.

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

p {
  margin-bottom: 20px;
}

.body {
  width: 100%;
  height: 100%;
  padding: 15px;
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #0084FF;
  color: #fff;
  padding: 25px;
  margin-top: 0px;
  margin: 0px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  z-index: 99999;
}

<div class="footer">Footer</div>
<div class="body">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>

  <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>

  <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>

  <p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.</p>

  <p>Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.</p>

  <p>Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris.</p>

  <p>Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus.</p>

  <p>Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac</p>
</div>

Answer 2

Have you experimented with using box-sizing: border-box;?
For more information, check out the documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Below is an example (use the [<>] button to test it out in your post!).

I included position: fixed; and bottom: 0; in this example to enhance its appearance, but feel free to customize it as needed.

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

p {
  margin-bottom: 20px;
}

.body {
  width: 100%;
  height: 100%;
  padding: 15px;
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #0084FF;
  color: #fff;
  padding: 25px;
  margin-top: 0px;
  margin: 0px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  z-index: 99999;
}

<div class="footer">Footer</div>
<div class="body">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>

  <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>

  <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>

  <p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.</p>

  <p>Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.</p>

  <p>Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris.</p>

  <p>Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus.</p>

  <p>Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac</p>
</div>

Answer 3

Answer №2

To ensure your footer stays at the bottom, you can apply bottom: 0 (refer to MDN Web Docs for more details) and use either position: fixed or position: sticky (check MDN Web Docs for further information). Below is a sample code snippet demonstrating this:

body {
    background-color: gold;
    margin: 0;
}

.content {
    <!-- Added this to show you that you can scroll and the footer stays at the bottom -->
    height: 1500px;
}

footer {
    position: fixed;
    bottom: 0;
    width: 100vw;
    background: #0084FF;
    color: #fff;
    padding: 25px;        
}

<div class="content"></div>
<footer>Footer</footer>

Answer 4

To ensure your footer stays at the bottom, you can apply bottom: 0 (refer to MDN Web Docs for more details) and use either position: fixed or position: sticky (check MDN Web Docs for further information). Below is a sample code snippet demonstrating this:

body {
    background-color: gold;
    margin: 0;
}

.content {
    <!-- Added this to show you that you can scroll and the footer stays at the bottom -->
    height: 1500px;
}

footer {
    position: fixed;
    bottom: 0;
    width: 100vw;
    background: #0084FF;
    color: #fff;
    padding: 25px;        
}

<div class="content"></div>
<footer>Footer</footer>

Answer 5

Answer №3

Have you considered using position fixed or sticky for your layout?

I opted for the fixed positioning method. Below is the code snippet where I applied some styling and set the desired position.

<!DOCTYPE html>
<html lang="en>
<head>
    <meta charset="UTF-8>

   // More code goes here...

        Copyright lorem.com  &copy;   
     </footer>
</body>
</html>

Answer 6

Have you considered using position fixed or sticky for your layout?

I opted for the fixed positioning method. Below is the code snippet where I applied some styling and set the desired position.

<!DOCTYPE html>
<html lang="en>
<head>
    <meta charset="UTF-8>

   // More code goes here...

        Copyright lorem.com  &copy;   
     </footer>
</body>
</html>

Answer 7

Answer №4

Solution:

To ensure the footer stays at the bottom of the page, you need to set the CSS property bottom: 0; for your footer. Additionally, using position: absolute; will only keep the footer fixed within its parent container, so if you want the footer to remain at the bottom even when the user scrolls, consider using position: fixed; or position: sticky;.

Code

.scroll{

<!-- this is present here only to show you the scrolling mechanism -->

       margin-top: 100px;
       width:100%;
       height:300vh;
       background: #ff0000;
}

.footer{
       position: fixed;
       bottom: 0;
       background: #000;
       color: #fff;
       min-height: 50px;
       width: 100vw
}

<div class="scroll">...</div>
<div class="footer">This is a footer</div>

Answer 8

Solution:

To ensure the footer stays at the bottom of the page, you need to set the CSS property bottom: 0; for your footer. Additionally, using position: absolute; will only keep the footer fixed within its parent container, so if you want the footer to remain at the bottom even when the user scrolls, consider using position: fixed; or position: sticky;.

Code

.scroll{

<!-- this is present here only to show you the scrolling mechanism -->

       margin-top: 100px;
       width:100%;
       height:300vh;
       background: #ff0000;
}

.footer{
       position: fixed;
       bottom: 0;
       background: #000;
       color: #fff;
       min-height: 50px;
       width: 100vw
}

<div class="scroll">...</div>
<div class="footer">This is a footer</div>

What is the best way to keep a <div> class anchored to the bottom of an HTML page?

Answer №1

Answer №2

Answer №3

Answer №4

Solution:

Code

Similar questions

Active Tab Indicator - Make Your Current Tab Stand Out

Combine lists with floating elements positioned to the left or right

There appears to be a CSS problem cropping up on the right side of my website

Modifying the value property of the parent element

Using Next.js in conjunction with Tailwind CSS and the shadcn/ui library to tackle the issue of preventing overscroll from creating

Adding EventListeners for Click Handling: A Step-by-Step Guide

Configuring the interactive background for a textbox

Building HTML tables with JQuery for handling large datasets of over 4,000 rows and beyond

What is the best way to animate images moving from the center to the left in HTML?

Overflow due to cascading style sheets

Prevent the loading of a <img> element and replace it with a new one using CSS

Looking to utilize Python Selenium for downloading a PDF file

Do we actually need all of these DIVs?

What is the best way to create a gallery using Bootstrap 4?

Retrieve the input value from a Bootstrap Form Input

Adjust the class attribute in real-time

What is the best way to trigger click events within a select dropdown using Angular?

Clicking on the icon reveals the current date

The overflow hidden property in Tailwind CSS is not functioning properly during animations

How can you trigger a 'hashchange' event regardless of whether the hash is the same or different?