CODEWITHSUNDEEP
htmlcss
dotnetnoob
dotnetnoob

Reputation: 11360

Fluid sticky footer using CSS

I know there are millions of examples out there relating to sticky footers, however, I'm looking for a more specific solution.

I want to push the footer to the bottom of the page if the content is short - I don't want it to sit there for longer pages (i.e. fixed positioning).

I already have a javascript solution that does this, however I'm looking for a potential CSS only solution so that I can ditch the javascript.

I know about flexbox solutions too, but given the sparse browser support at the moment, this is not an option either.

So, is there a CSS solution to the sticky footer challenge that allows for a fluid footer height and does not use javascript or flexbox?

CSS guru's, you're advice is appreciated.

Upvotes: 2

Views: 184

Answers (1)

Oriol
Oriol

Reputation: 288690

You can try a CSS table approach:

html, body {
  height: 100%;
  margin: 0;
}
body {
  display: table;
  width: 100%;
}
.wrapper {
  display: table-row;
  height: 100%;
  background-color: red;
}
.footer {
  display: table-cell;
  background-color: green;
}
h1 {
  resize: vertical;
  overflow: auto;
  border: 2px solid;
}
<div class="wrapper">
  <h1>Resize me</h1>
</div>
<div class="footer">hello, <br />world!!</div>

Upvotes: 2

Related Questions