CODEWITHSUNDEEP
htmlcss
Zsolt
Zsolt

Reputation: 3283

How to create a sticky footer in CSS inside an absolutely positioned div?

I would like to create a sticky footer inside an absolutely positioned div element.

My approach was to position the footer div absolutely as well - inside an additional relatively positioned "page" div (which would contain the actual content of the page):

<div class="content">
   <div class="page">
      ...Some Lorem ipsum content...
      <div class="footer">Some footer</div>
   </div>
</div>

with the following styles:

.content {
     position: absolute;
     top: 60px;
     right: 0;
     bottom: 0;
     left: 0;
}

.page {
    position: relative;
    min-height: 100%;
}

.footer {
    height: 30px;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
}

This method doesn't work very well since the footer overlaps the text at a certain level when you resize the page. How can I get rid of this overlapping behaviour?

A more detailed, working example with the full layout: https://jsfiddle.net/8nrukse9/2/

Upvotes: 1

Views: 118

Answers (3)

serraosays
serraosays

Reputation: 7919

As the browser window resizes, the footer height in CSS will dynamically change. Flexbox takes care of that, older CSS layouts are not able to do so.

IF IE9 support is a must, I'd determine the footer min-height offset with jQuery dynamically by calculating the height of .footer .

var footerHeight = $( "footer" ).height();
$(".page").css("min-height", footerHeight);

Upvotes: 1

Lalji Tadhani
Lalji Tadhani

Reputation: 14189

change CSS

    .page{height: 100%;}
  .page-inner {
    margin-bottom:-30px;
    min-height: 100%;


  }
  .page-inner:after{height:30px;
  content: "";
  display: block;
}
  .footer {
    height: 30px;
    color: brown;
    border: 1px solid brown;
  }

https://jsfiddle.net/8nrukse9/5/

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115385

The only method I can think of here is flexbox and not absolute positioning.

  .page {
    position: relative;
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }

  .footer {
    margin-top: auto;
    height: 30px;
    color: brown;
    border: 1px solid brown;
    background: rgba(255,255,255,0.5);
  }


body {
  color: white;
}

nav {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 200px;
  overflow: hidden;
}
nav .logo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: salmon;
}
nav .navmenu {
  margin: 0;
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  padding: 10px 20px;
  background-color: pink;
}

.content-wrapper {
  position: absolute;
  top: 0;
  left: 200px;
  bottom: 0;
  right: 0;
  overflow: hidden;
}
.content-wrapper .header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: pink;
}
.content-wrapper .content {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  padding: 10px 20px;
  background-color: rosybrown;
}
.content-wrapper .page {
  position: relative;
  min-height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
.content-wrapper .footer {
  margin-top: auto;
  height: 30px;
  color: brown;
  border: 1px solid brown;
  background: rgba(255, 255, 255, 0.5);
}
<nav>
  <div class="logo">Logo</div>
  <ul class="navmenu">
    <li>Start page</li>
    <li>Menu item 1</li>
    <li>Menu item 2</li>
    <li>Menu item 3</li>
  </ul>
</nav>
<div class="content-wrapper">
  <div class="header">
    Header
  </div>
  <div class="content">
    <div class="page">

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quis, temporibus, accusamus facere exercitationem molestiae reprehenderit alias dignissimos quo voluptates deleniti consequatur sunt sequi doloremque dolorem voluptatem ea voluptatum qui.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quis, temporibus, accusamus facere exercitationem molestiae reprehenderit alias dignissimos quo voluptates deleniti consequatur sunt sequi doloremque dolorem voluptatem ea voluptatum
      qui. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quis, temporibus, accusamus facere exercitationem molestiae reprehenderit alias dignissimos quo voluptates deleniti consequatur sunt sequi doloremque dolorem voluptatem ea voluptatum
      qui. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quis, temporibus, accusamus facere exercitationem molestiae reprehenderit alias dignissimos quo voluptates deleniti consequatur sunt sequi doloremque dolorem voluptatem ea voluptatum
      qui. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quis, temporibus, accusamus facere exercitationem molestiae reprehenderit alias dignissimos quo voluptates deleniti consequatur sunt sequi doloremque dolorem voluptatem ea voluptatum
      qui. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quis, temporibus, accusamus facere exercitationem molestiae reprehenderit alias dignissimos quo voluptates deleniti consequatur sunt sequi doloremque dolorem voluptatem ea voluptatum
      qui.

      <div class="footer">Some footer - it shouldn't overlap with the content if you resize the page</div>
    </div>
  </div>
</div>

Upvotes: 3

Related Questions