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

Solution 1:

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: 10px20px;
  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: 10px20px;
  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><divclass="logo">Logo</div><ulclass="navmenu"><li>Start page</li><li>Menu item 1</li><li>Menu item 2</li><li>Menu item 3</li></ul></nav><divclass="content-wrapper"><divclass="header">
    Header
  </div><divclass="content"><divclass="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.

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

Solution 2:

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/

Solution 3:

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);