Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

A true sticky footer with a fixed header?

First of all, please read this whole question so you can fully understand what i am looking for, Thanks!

This is a question i have been trying to research for a great time now, and has stumped me for quit a while. Can i have a true sticky footer with a fixed header?

How can i implement a sticky footer with a fixed header? I can't add padding or a margin to the body or content, since that will break the footer. Also, i want to be able to use width:100% and height: 100% inside my content without it overflowing and creating a mess.

Here is what i am aiming for (Please excuse my great Photoshop skills) :

enter image description here

This look good, when i use position:fixed; and bottom:0; on my footer. But to make it truly sticky, i need to add some css to my page. (from : http://css-tricks.com/snippets/css/sticky-footer/)

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 142px; 
}
.site-footer {
  background: orange;
}

This allows me to have a GREAT looking sticky footer, but here is the problem. Some of the content is underneath my fixed navigation bar.

I can't add padding or a margin to the body, html, OR the content, because that will make the sticky footer mess up. Is there any way i can do this without CSS "Hacks"?

This is with the content under the header: http://jsfiddle.net/g2ydV/3/

Looks good right!, but some of the content is hidden under the header? Lets fix that by adding a margin to the content: http://jsfiddle.net/g2ydV/2/

The above example works, BUT the footer is messed up. How can i achieve this effect without messing up my sticky footer?

like image 333
Hunter Mitchell Avatar asked Feb 05 '14 21:02

Hunter Mitchell


People also ask

What is a sticky footer?

A sticky footer pattern is one where the footer of your page "sticks" to the bottom of the viewport in cases where the content is shorter than the viewport height.

How do I make my header and footer sticky?

You can easily create sticky or fixed header and footer using the CSS fixed positioning. Simply apply the CSS position property with the value fixed in combination with the top and bottom property to place the element on the top or bottom of the viewport accordingly.

How do you make a footer sticky in CSS?

Method 2: (fixed height footer) Apply display:flex and flex-direction:column to the body . Apply margin-top:auto the footer . You're done, because auto margins inside flex containers absorb all available free space, making the footer stick to the bottom.


2 Answers

One potential solution is to swap your content:after to content:before.

Working Demo

CSS:

/* .content:after {
     content: "";
     display: block;
} */

.content:before {
 content: "";
 display: block;
 height: 45px;
}
like image 110
badAdviceGuy Avatar answered Sep 19 '22 10:09

badAdviceGuy


There's an alternative way of doing this using display: table; and display: table-cell which seems to be becoming increasingly popular.

I'm just offering it up as an alternative worth having a look at. It's quite clean and doesn't require any defined heights for the header and footer which is nice.

HTML

<div id="wrap">
  <div id="wrap-inner">

    <div class="navbar">
      <span>Fixed Header (content under here)</span>
    </div>

    <div class="content">
      <p>Content Here ... part of this is under the header, i need to see all of it without messing up the sticky footer</p>
    </div>

    <div class="footer">
      <span>Sticky footer!</span>
    </div>

  </div>
</div>

CSS

html, body {
  height: 100%;
}

body {
  margin: 0;
}

#wrap {
  display: table;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

#wrap-inner {
  vertical-align: middle; /* optional for positioning content in the middle */
  display: table-cell;
}

.navbar, .footer {
  position: fixed;
  width: 100%;
}

.navbar {
  top: 0;
  width: 100%;
}

.footer {
  bottom: 0;
}

Demo

like image 32
davidpauljunior Avatar answered Sep 20 '22 10:09

davidpauljunior