CSS Sticky Footers with Unknown Height

Question

Is there any way to stick a footer to the bottom of the browser screen or right after the content (depending on which is longer) using CSS without knowing the size of the footer in advance?

Right now I am using the absolute positioning in a container that holds the footer and the content with container's min-height as 100%, but if I change the footer I find I must change the padding at the bottom of the container to match its height.

Is this what you want? 1. a region that contains the page content (I will call this "the content"). 2. a region following "the content" that is the footer. 3. If the "the content" gets long, the footer is pushed of the page but will show up if the user scrolls the page. — DwB, Dec 03 '10 at 16:01
@dwb: yes, but the bottom of the footer is always at least on the bottom of the window, and we don't necessarily know the height of it. — Loyal Tingley, Dec 03 '10 at 16:19

score 37 · Accepted Answer · edited Jun 20 '20 at 09:12

37

http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/

Summary:

For a site with a header, content area, and footer:

Set html, body {height: 100%;}
Set your body (or a wrapper div) to display: table; width: 100%; height: 100%;
Set your header, footer, and content area to display: table-row;. Give your header and footer height: 1px;, and give your content area height: auto;

The header and footer will both expand to fit their content. The content area will expand to fit the larger of its content, or the available space.

https://jsfiddle.net/0cx30dqf/

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 10 '12 at 19:41

Igor Alekseev

1,208
12
20

a solution like this is exactly what I was looking for at the time, I've bookmarked it for when I'll inevitably need it in the future. Thanks :) – Loyal Tingley Jan 11 '12 at 05:11
3

I don't know why this was accepted as the answer, when it clearly says you need the height of the footer in the how-to... >.> – Nahydrin May 18 '13 at 22:44
1

@BrianGraham, no it doesn't. "Most of them (e.g. CSSStickyFooter) require a fixed height footer [...] however, here is an easy and plain CSS solution for sticky footers with fluid height" Look in the code samples too, it doesn't need the height of the footer anywhere in there. – Joshua Walsh Feb 17 '15 at 02:43
Please provide a summary and not just a link. http://stackoverflow.com/help/how-to-answer – 2540625 May 27 '15 at 17:11
You should add `table-layout: fixed;` to the wrapper div. Without that I had some width issues in IE. The content was overflowing regardless of the maximum width. – Philipp Michael Jul 01 '15 at 14:56
Is there a reason why any `border` setting disappears when I turn on the `display: table-row;` property? – gigabytes Aug 01 '15 at 16:00
@Brian Graham, `table-cell` doesn't lock the height like block would have, instead, it allows the field to expand; therefore the height is unknown. – HelpNeeder Jan 13 '16 at 17:52
@HelpNeeder I ended up using this solution back then, I just forgot to reply to this thread. Thanks for the help. – Nahydrin Jan 13 '16 at 19:55

score 24 · Answer 2 · edited May 23 '17 at 12:02

24

If you're willing to jump into the HTML5 future, you can use flexbox...

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
   flex: 1;
}

My more detailed answer to the same question: How to make a fluid sticky footer (full example: http://jsfiddle.net/n5BaR/)
Solved by flexbox: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
What is Flexbox from MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

edited May 23 '17 at 12:02

Community

1
1

answered Dec 06 '13 at 20:15

Luke

18,811
16
99
115

5

This has major issues with safari and IE <=11. – hugo der hungrige Jun 08 '16 at 14:06
@hugoderhungrige - The caveat "If you're willing to jump into the HTML5 future" is an important qualifier. IE11 has some bugs with its flexbox support, and I wouldn't recommend it for sites that have significant users in IE < 11. See: http://caniuse.com/#feat=flexbox – Luke Jun 09 '16 at 19:34
@Luke I'm not denying that. I still think it is interesting for users to know, that there are issues with browsers, which are considered to support fexbox (partly true for ie 10/11, true for safari >9). – hugo der hungrige Jun 09 '16 at 19:37
Update: Currently IE 11 makes up ~4% of traffic (http://gs.statcounter.com/browser-version-market-share), and all other browsers (desktop and mobile) fully support flexbox. https://caniuse.com/#feat=flexbox – Luke Mar 01 '19 at 14:20

mateos · Answer 3 · 2017-04-04T03:54:20.713

1

Try this!

Uses Flex!

NO FIXED HEIGHT, JAVASCRIPT OR TABLES

Expands when more content, and when there isn't it sticks to bottom

Note: Does not work with IE 9 & Below

*{
  margin: 0; 
  padding: 0;
}
html, body{
  height: 100%; 
}
body{
  min-height: 100%;
  display: flex;
  flex-direction: column;
  
}
.content{
  flex: 1;
  background: #ddd;
}

<body>
  <header>
    Header
  </header>
  
  <div class='content'>
    This is the page content
    <br>
    PS. Don't forget the margin: 0 and padding: 0 to avoid scrollbars (this can be also put into the   body css)
  </div>
  
  <footer>
    Footer
  </footer>
</body>

edited Apr 04 '17 at 03:54

answered Nov 25 '16 at 02:03

mateos

1,405
1
17
26

2

Because people have to support legacy browsers like Internet Explorer. – Florian Wendelborn Jan 03 '17 at 05:37
@Dodekeract IE 11 and 10 have support, IE 9 and below are barely used nowadays – mateos Jan 03 '17 at 06:11
@dude Worked with mine, try going into the developer tools and make sure you're using the IE 11 document mode. – mateos Mar 04 '17 at 08:11
It doesn't work once the main content goes beyond footer... in that case footer doesn't remain sticky and goes below the fold – kushdilip Apr 03 '17 at 17:41
1

That's not a sticky footer then, that's a fixed footer @kushdilip – mateos Apr 04 '17 at 03:52
@Albert This is great! Very clean solution. – cezar Sep 11 '17 at 10:37
@Dodekeract IE is more legacy than browser. It is a pure disgrace and there is not event the slight justification for the use of that monstrosity in the 21st century. – cezar Sep 11 '17 at 10:40

L1zardK1ng · Answer 4 · 2019-07-01T18:04:37.777

For an app with a responsive footer (i.e. changes height on resize), you can use jquery to dynamically adjust the padding of the bottom for the parent element. Adding onto this post: Keep Footer at Bottom

HTML:

<div class=”main-container”>
   <header>
    this is a header
   </header>
   <section>
    this is content
   </section>
   <footer>
    this is a footer
   </footer>
</div>

CSS:

html,
body {
 height: 100%;
 position: relative;
}
.main-container {
 min-height: 100vh; /* will cover the 100% of viewport */
 overflow: hidden;
 display: block;
 position: relative;
 padding-bottom: 100px; /* height of your footer */
}
footer {
 position: absolute;
 bottom: 0;
 width: 100%;
}

CoffeeScript:

footerEventListener = ->
  $(window).on "resize", ->
    setFooterHeight()

setFooterHeight = ->
  // get footer height in px
  bottomPadding = $("footer").css("height")
  $(".main-wrapper").css("padding-bottom", "#{bottomPadding}") 

// init footer events
setFooterHeight()
footerEventListener()

Check out the CodePen here.

score 0 · Answer 5 · answered Aug 22 '14 at 22:59

since no one knows the answer for sticky footer w/o knowing the height of it, using css (crosbrowser solution), i was forced to calculate it

jquery:

if( $(document).height() < $(window).height() )
{
    $('#content').height
    (
        $(window).height - $('#footer').height()
    );
}

html structure:

<div id="content"></div>
<div id="footer"></div>

score 0 · Answer 6 · answered Aug 09 '17 at 07:58

I think the best way is just add a class to your footer. Javascript will do the rest.

//This Pen is By Mohammad Abdus Salam
//portfolio.codeexposer.com
    var footerHeight = $('footer.fixed_footer').height();
    if($('footer').hasClass('fixed_footer')){
        $( "section" ).last().css({
            "margin-bottom": footerHeight + 'px'
        });
    }

@import url('https://fonts.googleapis.com/css?family=Raleway:400,700,800');
body{
  margin: 0;
  padding: 0;
  text-align:center;
  font-family: 'Raleway', sans-serif;
  line-height: 30px;
}
section{
  padding-top: 80px;
  padding-bottom: 80px;
  border-bottom:1px solid #ddd;
  background: #ffffff;
  z-index: 9;
}
h1{
  font-size: 48px;
  font-weight: 800;
  text-transform: capitalize;
}
a{
  text-decoration: none;
}
.container{
  width: 700px;
  display: inline-block;
  box-sizing:border-box;
  padding-left: 30px;
  padding-right: 30px;
}
.logo{
  height: 80px;
  width: 80px;
  display: inline-block;
}

.footer_top{
  border-bottom: 1px solid #777;
  padding-bottom: 60px;
}
.logo img{
  width: 100%;
  height: 100%;
}
.footer_bottom {}
.footer_bottom p{
  color:#aaa;
}
.footer_top{
  padding-top: 100px;
}
.footer_bottom p a{
  color:#158;
}
footer{
  width: 100%;
  left: 0;
  bottom:0px;
  z-index: -1;
  background: #222222;
}
.fixed_footer{
  width: 100%;
  position:fixed;
  left: 0;
  bottom:0;
  z-index: -99;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div class="container">
    <h1>This is Banner</h1>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
    </p>
  </div>
</section>
<section>
  <div class="container">
    <h1>This is About</h1>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
    </p>
  </div>
</section>
<section>
  <div class="container">
    <h1>This is Service</h1>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
    </p>
  </div>
</section>
<section>
  <div class="container">
    <h1>This is Portfolio</h1>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
    </p>
  </div>
</section>
<section>
  <div class="container">
    <h1>This is Banner</h1>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
    </p>
  </div>
</section>

<footer class="fixed_footer">
  <div class="container">
    <div class="footer_top">
        <a class="logo" href="portfolio.codeexposer.com">
          <img src="https://lh3.googleusercontent.com/-a700z77yIxk/AAAAAAAAAAI/AAAAAAAAABM/RzvY_qm9KQY/s512-p/photo.jpg" alt="">
        </a>
    </div>
    <div class="footer_bottom">
      <p>
        All Rights Reserved By <a href="http://portfolio.codeexposer.com">Mohammad Abdus Salam</a>
      </p>
    </div>
  </div>
</footer>

score -2 · Answer 7 · edited Aug 24 '18 at 12:36

-2

~~Take a look at this, cssstickyfooter, it works great in any browser.~~

Update: This is from 2010, might not be relevant with current standards

edited Aug 24 '18 at 12:36

Praveen Kumar Purushothaman

164,888
24
203
252

answered Dec 03 '10 at 15:59

yvoyer

7,476
5
33
37

5

I looked at this; this is a good solution if you know the height of the footer in advance. – Loyal Tingley Dec 03 '10 at 16:20

CSS Sticky Footers with Unknown Height

7 Answers7

Linked

Related