如何在绝对定位的 div 内的 CSS 中创建粘性页脚？

Question

我想在一个绝对定位的 div 元素内部创建一个粘性页脚。

我的方法是绝对定位页脚 div - 在一个额外的相对定位的“页面” div 内（它将包含页面的实际内容）：

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

具有以下样式：

.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;
}

此方法效果不佳，因为当您调整页面大小时，页脚会在一定程度上与文本重叠。 我怎样才能摆脱这种重叠的行为？

具有完整布局的更详细的工作示例：https://jsfiddle.net/8nrukse9/2/

Answer 1

这里我能想到的唯一方法是flexbox，而不是绝对定位。

  .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>

Answer 2

更改 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/

Answer 3

随着浏览器窗口大小的调整，CSS 中的页脚height 会动态变化。 Flexbox 可以解决这个问题，旧的 CSS 布局无法做到这一点。

如果必须支持 IE9，我会通过计算 .footer 的高度来动态确定脚注 min-height 与 jQuery 的偏移量。

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