CODEWITHSUNDEEP
headercss-positionsticky-footer
Paweł Skaba
Paweł Skaba

Reputation: 681

Fixed header + sticky footer

Hey Stackoverflow team,

I have a tiny problem with fixed header and sticky footer. Code is available here: http://jsfiddle.net/sgWxh/

What I want o achieve: + Header which stays always on top, even during scrolling - its visible always in the same place, + Footer which is sticked to the bottom of page - it's NOT visible during scrolling, unless you will get to the bottom of page.

I see that position fixed is not working on some way with sticky footer made in this way:http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

any ideas?

Upvotes: 3

Views: 1628

Answers (2)

John Rotondo
John Rotondo

Reputation: 1

Alexander, your technique here is a good one. I had a few additional requirements for a project I'm working on. I needed the fixed header and sticky footer, but also a fixed sidebar for navigation that was responsive as well. With your example, I was able to modify and achieve that, WITHOUT the use of poorly supported flexbox or cssgrid. Thanks! Here's my solution:

https://jsfiddle.net/jrotondo/zecdv0h5/1/

` 

html, body {
  height:100%;   margin:0;padding:0;
}

html {
  background:#fff;
}

.header-container {
  width:100%;
  height:52px;
  background-color:#ccc;
  margin:0 auto;
  position:fixed !important;
  position: absolute; /*ie6 and above*/
  top:0;
  left:0;
  right:0;
}

header {
  width:80%;
  margin:0 auto;
  height:52px;
  text-align:center;
}

aside.sidebar-container {
  background-color:#ff9900;
  margin: 0 0 -52px 0;
  position:fixed !important;
  position: absolute; /*ie6 and above*/
  top: 52px;
  left:0;
}

#content {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  box-sizing: border-box;
}

footer {
  width:100%;
  height: 75px;
  background-color: #666;
  color: #fff;
  margin:0 auto;
  text-align:center;
}

.push {
  height:75px;
}


/*Mobile View*/
@media only screen and (max-width: 1024px) {
  aside.sidebar-container {
    width:100vw;
    height:42px;
    z-index: 1;
  }
  #content {
    padding-top: 94px;
    width: calc(100vw - 40px);
    margin: 0px 20px -75px 20px;
  }
}

@media only screen and (min-width: 1025px) {
  aside.sidebar-container {
    width:192px;
    height:100vh;
    z-index: -1;
  }
  #content {
    padding-top: 62px;
    width: calc(100vw - 232px);
    margin: 0px 20px -75px 212px;
  }
}

`

    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fixed Header / Sticky Footer</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="header-container">
    <header>
      Fixed Header
    </header>
  </div>
  <aside class="sidebar-container">
    <nav class="main-nav">
      Fixed Nav
    </nav>
  </aside>
  <div id="content">
    <p>
      Praesent tortor massa, ultrices in mattis non, viverra vitae eros. Fusce egestas suscipit nulla tincidunt cursus.
      Etiam eget tortor sit amet arcu bibendum bibendum nec in lorem. Phasellus posuere placerat mi, et consequat sem molestie ut.
      Sed eget sapien sed lacus laoreet vestibulum sit amet nec lectus. Aenean sed tortor turpis. Morbi consectetur diam quis augue
      convallis iaculis. Curabitur pulvinar scelerisque euismod. Cras et sagittis mauris. Mauris nisl ipsum, bibendum et congue vitae,
      blandit id sapien. Suspendisse ipsum metus, vehicula quis ultrices at, interdum quis nunc. Aenean fermentum hendrerit nisl vitae
      euismod. Morbi dictum mattis tellus, ac ornare sapien venenatis quis.
    </p>
    <p>
      Praesent tortor massa, ultrices in mattis non, viverra vitae eros. Fusce egestas suscipit nulla tincidunt cursus.
      Etiam eget tortor sit amet arcu bibendum bibendum nec in lorem. Phasellus posuere placerat mi, et consequat sem molestie ut.
      Sed eget sapien sed lacus laoreet vestibulum sit amet nec lectus. Aenean sed tortor turpis. Morbi consectetur diam quis augue
      convallis iaculis. Curabitur pulvinar scelerisque euismod. Cras et sagittis mauris. Mauris nisl ipsum, bibendum et congue vitae,
      blandit id sapien. Suspendisse ipsum metus, vehicula quis ultrices at, interdum quis nunc. Aenean fermentum hendrerit nisl vitae
      euismod. Morbi dictum mattis tellus, ac ornare sapien venenatis quis.
    </p>
    <p>
      Praesent tortor massa, ultrices in mattis non, viverra vitae eros. Fusce egestas suscipit nulla tincidunt cursus.
      Etiam eget tortor sit amet arcu bibendum bibendum nec in lorem. Phasellus posuere placerat mi, et consequat sem molestie ut.
      Sed eget sapien sed lacus laoreet vestibulum sit amet nec lectus. Aenean sed tortor turpis. Morbi consectetur diam quis augue
      convallis iaculis. Curabitur pulvinar scelerisque euismod. Cras et sagittis mauris. Mauris nisl ipsum, bibendum et congue vitae,
      blandit id sapien. Suspendisse ipsum metus, vehicula quis ultrices at, interdum quis nunc. Aenean fermentum hendrerit nisl vitae
      euismod. Morbi dictum mattis tellus, ac ornare sapien venenatis quis.
    </p>
    <p>
      Praesent tortor massa, ultrices in mattis non, viverra vitae eros. Fusce egestas suscipit nulla tincidunt cursus.
      Etiam eget tortor sit amet arcu bibendum bibendum nec in lorem. Phasellus posuere placerat mi, et consequat sem molestie ut.
      Sed eget sapien sed lacus laoreet vestibulum sit amet nec lectus. Aenean sed tortor turpis. Morbi consectetur diam quis augue
      convallis iaculis. Curabitur pulvinar scelerisque euismod. Cras et sagittis mauris. Mauris nisl ipsum, bibendum et congue vitae,
      blandit id sapien. Suspendisse ipsum metus, vehicula quis ultrices at, interdum quis nunc. Aenean fermentum hendrerit nisl vitae
      euismod. Morbi dictum mattis tellus, ac ornare sapien venenatis quis.
    </p>
    <p>
      Praesent tortor massa, ultrices in mattis non, viverra vitae eros. Fusce egestas suscipit nulla tincidunt cursus.
      Etiam eget tortor sit amet arcu bibendum bibendum nec in lorem. Phasellus posuere placerat mi, et consequat sem molestie ut.
      Sed eget sapien sed lacus laoreet vestibulum sit amet nec lectus. Aenean sed tortor turpis. Morbi consectetur diam quis augue
      convallis iaculis. Curabitur pulvinar scelerisque euismod. Cras et sagittis mauris. Mauris nisl ipsum, bibendum et congue vitae,
      blandit id sapien. Suspendisse ipsum metus, vehicula quis ultrices at, interdum quis nunc. Aenean fermentum hendrerit nisl vitae
      euismod. Morbi dictum mattis tellus, ac ornare sapien venenatis quis.
    </p>
    <div class="push"></div>
  </div>
  <footer> Sticky Footer</footer>
</body>

</html>

Upvotes: 0

Alexander Scholz
Alexander Scholz

Reputation: 2100

Just came across this page because I had the same problem. Instead of margin-top you have to use padding-topand box-sizing: border-box:

http://jsfiddle.net/sgWxh/20/

Upvotes: 1

Related Questions