Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Jquery

Sticky Footer Till Document Height Greater Than Viewport

Post a Comment
EDIT Incorrectly marked as a duplicate, I marked it duplicate before I tested the answer on the referred question. It doesn't provide the exactly what I want, which is a sticky foo

Solution 1:

Two relatively newer methods that can be used are using calc and flexbox. Both have decent support (above 90% without prefixes for calc and with prefixes for flexbox). Using them is pretty simple, especially compared to some of the older (and admittedly more supported) methods. If you really want to push support then viewport units can make them even simpler.

Method One - Calc:

CSS:

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

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

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

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

HTML:

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

DEMO: codepen

Method 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 version is nice because header and footer can be fluid. The flex: 1; in main makes sure that main will fill any remaining space left after header and footer take whatever they need. Calc's version is less powerful, requiring a static header and footer, but no prefixes. They both work fine for me, personally, with either autoprefixer or prefixfree making sure I don't have to worry about prefixes either way.


Solution 2:

You are probably looking for something like 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 example the footer will be 4em high. You will probably want to adjust this to your wishes by modifying the "margin"of the ".wrapper"and the "footer" "height"


Solution 3:

You can use this css to your footer to make it at the bottom of viewport.

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

Solution 4:

Check this out:

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

function fixHeight() {
  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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>
  </div>
</div>
<div class="footer">
  Footer Section
</div>

Post a Comment for "Sticky Footer Till Document Height Greater Than Viewport"