How to Make a Fluid Sticky Footer

Fluid sticky footer with flex

What if ?

the second container can be a flexbox too ,

Use the same CSS flex technic applied to body and #mainDiv to #mainDiv and #contentDiv, minus height since flex:1; is already sizing #mainDiv.

body,

#mainDiv  {

  padding: 0;

  margin: 0;

  display: flex;

  flex-direction: column;

}

body {

  min-height: 100vh;

}

#mainDiv,

#contentDiv {

  flex: 1;

}

/* see them */

#headerDiv,#footerDiv {background:yellow;padding:1em}

#mainDiv {background:pink;}

<div id="headerDiv"> This is header </div>

<div id="mainDiv">

  <div id="contentDiv"> This is content </div>

  <div id="footerDiv"> This is footer </div>

</div>

CSS - make a FLUID height footer stick to bottom of page

Why don't you just use min-height on the content area so if u set the min-height to 600px if theres only 300px of content it will pad the footer down another 300px so it isn't in the middle of the screen

Sticky header, sticky footer (variable height), fluid middle?

All other solutions here are out of date and either resort to JavaScript, or don't support a variable height footer.

With the advent of the CSS flex model, solving the variable-height sticky footer problem becomes very, very easy: while mostly known for laying out content in the horizontal direction, Flexbox actually works just as well for vertical layout problems. All you have to do is wrap the vertical sections in a flex container and choose which ones you want to expand. They'll automatically take up all the available space in their container.

Note how simple the markup and the CSS are. No table hacks or anything.

The flex model is supported by all major browsers as well as allegedly IE11+, though my IE doesn't render this snippet correctly yet.

html, body {

  height: 100%;

}

#headContainer {

  background: yellow;

  height: 100px;  /* can be variable as well */

}

#wrapper {

  display: flex;  /* use the flex model */

  min-height: 100%;

  flex-direction: column;  /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */

}

#bodyContainer {

  flex: 1;

  border: 1px solid orange;

}

#footContainer {

  background: lime;

}

<div id="wrapper">

  <div id="headContainer">Title</div>

  <div id="bodyContainer">Stuff goes here</div>

  <div id="footContainer">

    Footer<br/>

    of<br/>

    variable<br/>

    height<br/>

  </div>

</div>

fluid height in sticky footer

If your intention is fill any space between the end of the content and the start of the footer, I can see all sorts of challenges.

Depending on the specifics of your image, maybe you can include it as a background like this:

http://jsfiddle.net/panchroma/hBzjn/

You could use media queries, possibly with different images at different viewponts and also use padding to refine the results.

Good luck!

HTML

 <div id="wrap">
    <div class="contentWrap">

  <!-- Begin page content -->
  <div class="container">
    <div class="page-header">
      <h1>Sticky footer</h1>
    </div>
    <p>page content</p>
  </div>

  <div id="push"></div>
    </div><!-- end contentWrap -->
</div> <!-- end wrap -->

<div id="footer">
  <div class="container">
      <h3>sticky footer </h3>
  </div>
</div>

CSS

#wrap{
background: url(http://is.gd/0QPvoC) left bottom; /* define image and position */
}

.contentWrap{
background-color:#fff;  /* quick fix so background image is hidden behind main content */
}

problem implementing css sticky footer with liquid/fluid layout

It looks like I needed to change the position of the #home, #about, #proof, and #contact divs to relative instead of absolute like I had them. However, once I do that they are no longer stacked on top of each other. Any ideas on how to make relatively positioned divs have the same (x,y) position so that they are right on top of each other? I have the top and left set to 0px for each div but theyare just layering themselves instead of stacking...if that makes any sense.

How to stick footer to bottom of the page, without using fixed

First thing, for footer, you need to use <footer class="footer"></footer> if you're using bootstrap.

You can also have a separate component for footer if you're using react.

In html, css

Bootstrap footer at the bottom of the page

https://stackoverflow.com/questions/10099422/flushing-footer-to-bottom-of-the-page-twitter-bootstrap#:~:text=The%20simplest%20technique%20is%20probably,the%20footer%20to%20the%20bottom.&text=Tested%20with%20Bootstrap%203.6.

The above links should be helpful

How to make a sticky footer using CSS?

Following a clean method implemented from an online source no longer available (dead link), the minimum code you should need for your page would be (note - probably best to use #bottom-footer instead of footer #bottom-footer for the selection of your footer - that could be part of the issue):

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
#bottom-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}