CSS Sticky Footers with Unknown Height

Asked 3/12, 2010 at 15:41 Answered 1/7, 2019 at 17:57

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.

Alcoholometer answered 3/12, 2010 at 15:41 Comment(2)

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. – Chiaki 3/12, 2010 at 16:1

@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. – Alcoholometer 3/12, 2010 at 16:19

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/

Spleen answered 10/1, 2012 at 19:41 Comment(8)

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 :) – Alcoholometer 11/1, 2012 at 5:11

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... >.> – Breechloader 18/5, 2013 at 22:44

@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. – Retrogradation 17/2, 2015 at 2:43

Please provide a summary and not just a link. stackoverflow.com/help/how-to-answer – Fleda 27/5, 2015 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. – Particularism 1/7, 2015 at 14:56

Is there a reason why any border setting disappears when I turn on the display: table-row; property? – Luu 1/8, 2015 at 16:0

@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. – Eulogize 13/1, 2016 at 17:52

@Eulogize I ended up using this solution back then, I just forgot to reply to this thread. Thanks for the help. – Breechloader 13/1, 2016 at 19:55

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

Glowing answered 6/12, 2013 at 20:15 Comment(4)

This has major issues with safari and IE <=11. – Hadlock 8/6, 2016 at 14:6

@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: caniuse.com/#feat=flexbox – Glowing 9/6, 2016 at 19:34

@Glowing 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). – Hadlock 9/6, 2016 at 19:37

Update: Currently IE 11 makes up ~4% of traffic (gs.statcounter.com/browser-version-market-share), and all other browsers (desktop and mobile) fully support flexbox. caniuse.com/#feat=flexbox – Glowing 1/3, 2019 at 14:20

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>

Crispi answered 25/11, 2016 at 2:3 Comment(7)

Because people have to support legacy browsers like Internet Explorer. – Gloaming 3/1, 2017 at 5:37

@Dodekeract IE 11 and 10 have support, IE 9 and below are barely used nowadays – Crispi 3/1, 2017 at 6:11

@dude Worked with mine, try going into the developer tools and make sure you're using the IE 11 document mode. – Crispi 4/3, 2017 at 8: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 – Differentiation 3/4, 2017 at 17:41

That's not a sticky footer then, that's a fixed footer @Differentiation – Crispi 4/4, 2017 at 3:52

@Albert This is great! Very clean solution. – Academy 11/9, 2017 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. – Academy 11/9, 2017 at 10:40

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.

Belenbelesprit answered 1/7, 2019 at 17:57 Comment(0)

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>

Borg answered 22/8, 2014 at 22:59 Comment(0)

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>

Vladivostok answered 9/8, 2017 at 7:58 Comment(0)

-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

Hedi answered 3/12, 2010 at 15:59 Comment(1)

I looked at this; this is a good solution if you know the height of the footer in advance. – Alcoholometer 3/12, 2010 at 16:20

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags