Keep the footer fixed at the bottom until the document height exceeds the viewport height

Question

Keep the footer fixed at the bottom until the document height exceeds the viewport height

UPDATE

Originally flagged as a duplicate, I mistakenly labeled it before actually testing the solution in the linked question. The provided answer did not meet my specific requirement of having a sticky footer that only floats to the bottom of the page when the content exceeds the viewport size.

/UPDATE

UPDATE2

I discovered a suitable solution on this website, which utilizes pure CSS and perfectly fulfills my needs.

/UPDATE2

I am looking for a way to keep the footer sticky until the document height surpasses the viewport height, at which point it should naturally align itself with the end of the document.

The structure of the document is as follows:

<body>
    <div class="header">
        <!-- content -->
    </div>
    <div class="page-content">
        <!-- content -->
    </div>
    <div class="footer">
        <!-- content -->
    </div>
</body>

JSFiddle link

The .header has a height of 101px, while the .footer stands at 173px.

The height of .page-content varies based on the content within it.

My desired outcome is for the .footer to remain fixed at the bottom of the viewport unless the document height exceeds that of the viewport.

I attempted setting a min-height for .page-content to always overflow the viewport, but this resulted in an unattractive layout.

Is achieving this solely through CSS possible, or would JavaScript/JQuery be necessary?

javascript jquery html css

Answer 1

Answer №1

Two modern techniques that can be implemented are utilizing calc and flexbox. Both have good browser support (over 90% without prefixes for calc and with prefixes for flexbox). Integrating them is relatively straightforward, especially in comparison to older methods. For enhanced compatibility, viewport units can further simplify implementation.

Technique One - Calc:

CSS:

/* Only required if not using vh in main */
html, body {
  height: 100%;
}

header {
  /* Must be static */
  height: 70px;
}

footer {
  /* Must be static */
  height: 30px;
}

main {
  /* Can substitute 100vh instead of 100% */
  min-height: calc(100% - 70px - 30px);
}

HTML:

<header></header>
<main></main>
<footer></footer>

DEMO: codepen

Technique Two - Flexbox:

CSS:

body {
  display: flex;
  flex-direction: column;
  /* If using percent then html needs a height of 100% */
  min-height: 100vh;
}

main {
  flex: 1;
}

HTML:

<header></header>
<main></main>
<footer></footer>

DEMO: codepen

The flexbox approach offers flexibility as header and footer can adjust dynamically. The flex: 1; property in main ensures it fills any remaining space after header and footer consume their required space. Although the calc method may require static dimensions for header and footer, it does not necessitate prefixes. Personally, both methods work well for me, aided by autoprefixer or prefixfree to handle any prefix concerns.

Answer 2

Two modern techniques that can be implemented are utilizing calc and flexbox. Both have good browser support (over 90% without prefixes for calc and with prefixes for flexbox). Integrating them is relatively straightforward, especially in comparison to older methods. For enhanced compatibility, viewport units can further simplify implementation.

Technique One - Calc:

CSS:

/* Only required if not using vh in main */
html, body {
  height: 100%;
}

header {
  /* Must be static */
  height: 70px;
}

footer {
  /* Must be static */
  height: 30px;
}

main {
  /* Can substitute 100vh instead of 100% */
  min-height: calc(100% - 70px - 30px);
}

HTML:

<header></header>
<main></main>
<footer></footer>

DEMO: codepen

Technique Two - Flexbox:

CSS:

body {
  display: flex;
  flex-direction: column;
  /* If using percent then html needs a height of 100% */
  min-height: 100vh;
}

main {
  flex: 1;
}

HTML:

<header></header>
<main></main>
<footer></footer>

DEMO: codepen

The flexbox approach offers flexibility as header and footer can adjust dynamically. The flex: 1; property in main ensures it fills any remaining space after header and footer consume their required space. Although the calc method may require static dimensions for header and footer, it does not necessitate prefixes. Personally, both methods work well for me, aided by autoprefixer or prefixfree to handle any prefix concerns.

Answer 3

Answer №2

If you're in need of a sticky footer solution, consider checking out Ryan Faits' "HTML 5 Sticky Footer."

CSS:

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -4em;
}
.footer, .push {
  height: 4em;
}

HTML:

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Footer Content here</p>
        </div>
    </body>
</html>

In this demonstration, the footer is set to be 4em in height. Feel free to customize it by adjusting the "margin" property of the ".wrapper" and the "height" property of the "footer".

Answer 4

If you're in need of a sticky footer solution, consider checking out Ryan Faits' "HTML 5 Sticky Footer."

CSS:

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -4em;
}
.footer, .push {
  height: 4em;
}

HTML:

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Footer Content here</p>
        </div>
    </body>
</html>

In this demonstration, the footer is set to be 4em in height. Feel free to customize it by adjusting the "margin" property of the ".wrapper" and the "height" property of the "footer".

Answer 5

Answer №3

To ensure your footer stays at the bottom of the viewport, you can apply this CSS code:

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 173px;
}

Answer 6

To ensure your footer stays at the bottom of the viewport, you can apply this CSS code:

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 173px;
}

Answer 7

Answer №4

Take a look at this innovative code snippet:

$(function () {
  $(".large-content").hide();
  $("a").click(function () {
    $(".large-content").toggle();
    fixHeight();
  });
  fixHeight();
});

function adjustHeight() {
  if ($(window).height() >= $(document).height())
    $("body").addClass("fixed-footer");
  else
    $("body").removeClass("fixed-footer");
}

* {font-family: 'Segoe UI'; font-size: 10pt; margin: 0; padding: 0; list-style: none;}
p {margin: 0 0 10px;}
.header, .footer {text-align: center; color: #fff; background-color: #000;}
body.fixed-footer {padding-bottom: 2em;}
body.fixed-footer .footer {position: fixed; width: 100%; bottom: 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="header">
  Header Section
</div>
<div class="page-content">
  <p>Small Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat aliquam error quas culpa, sapiente sunt asperiores impedit ipsa cupiditate tempore, molestias, vitae laboriosam suscipit pariatur odit? Cumque fugiat iste provident.</p>
  <p><a href="#">Click for large content!</a></p>
  <div class="large-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
    <p>... (more repeat paragraphs) ...</p>
  </div>
</div>
<div class="footer">
  Footer Section
</div>

Answer 8

Take a look at this innovative code snippet:

$(function () {
  $(".large-content").hide();
  $("a").click(function () {
    $(".large-content").toggle();
    fixHeight();
  });
  fixHeight();
});

function adjustHeight() {
  if ($(window).height() >= $(document).height())
    $("body").addClass("fixed-footer");
  else
    $("body").removeClass("fixed-footer");
}

* {font-family: 'Segoe UI'; font-size: 10pt; margin: 0; padding: 0; list-style: none;}
p {margin: 0 0 10px;}
.header, .footer {text-align: center; color: #fff; background-color: #000;}
body.fixed-footer {padding-bottom: 2em;}
body.fixed-footer .footer {position: fixed; width: 100%; bottom: 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="header">
  Header Section
</div>
<div class="page-content">
  <p>Small Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat aliquam error quas culpa, sapiente sunt asperiores impedit ipsa cupiditate tempore, molestias, vitae laboriosam suscipit pariatur odit? Cumque fugiat iste provident.</p>
  <p><a href="#">Click for large content!</a></p>
  <div class="large-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
    <p>... (more repeat paragraphs) ...</p>
  </div>
</div>
<div class="footer">
  Footer Section
</div>

Keep the footer fixed at the bottom until the document height exceeds the viewport height

Answer №1

Technique One - Calc:

Technique Two - Flexbox:

Answer №2

Answer №3

Answer №4

Similar questions

"Encountering issues with jQuery Ajax: Dealing with HTTP 405 or

Assign a variable to the result of ajax that remains unchanged until it is specifically invoked

Utilizing Bootstrap 5 with either a 16 or 24 column grid system minus the need for Sass

Using Jest to mock a single function within a class

Unable to apply CSS modifications to child elements in AngularJS

Stop a Post Request from being processed once a form has been submitted to an IFrame

Submit information to the table: each entry in the table displays as a value of 1

Here's a way to display 4 <li> elements in a single row and the remaining 4 <li> elements in another row

Unidentified googletagmanager detected in vendors segment

Is it possible to perform direct URL searches using react-router-dom?

Positioning an image so that it is perfectly aligned on top of another image that is centered

Leveraging the power of HTML tags within PHP

Position the div alignment to the top within the table cell

Utilize jQuery, Flash, or HTML5 to upload an image

Master the art of fetching response data from an API and implementing a function to process the data and generate desired outputs using Node.js and JavaScript

Styling with CSS in Play Framework version 2.0.3

The order of console outputs can be inconsistent and may not always align with the order in which they are called

Updates to the Tailwind file are not appearing on the page after reopening the file

"Header background image gradually fades out and disappears as you scroll, revealing a bottom gradient effect in a React application

Interactive pop-up window featuring a top section, main content, and bottom section