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

Issues arise when attempting to manipulate the DOM with ng-view in AngularJS

IE11 not running Angular code inline as expected

Creating a dynamic word cloud in D3: Learn how to automatically adjust font sizes to prevent overflow and scale words to fit any screen size

Tips for overriding ng-disable in AngularJSUnleashing the

Ensure that all of the <li> elements within a <ul> container have equal widths

How can I customize the styling of Autocomplete chips in MUI ReactJS?

Focus on a primary window

Chrome page loading with smooth color transitions

Having trouble unchecking a checkbox in reactjs?

Identifying and categorizing flip switches with jQuery without relying on div elements

Challenges with basic contact form

Dealing with CSS specificity issues when incorporating material-ui for React into a WordPress plugin

Tips on displaying a single column in Bootstrap when only one item is present and switching to two columns when two items are present

Tips for transforming a menu into a dropdown menu

Pressing the menu button will trigger a function that halts after the third click

Issue with CakePdf unable to properly render CSS styling

When using font size in rem units, it will remain consistent across different screen sizes and not be subject to scaling

Can a webpage be redirected to another page while passing along the id from the original page?

Parsing text files with Highcharts

Python Selenium- Extract and print text from a dynamic list within a scrolling dropdown element