html - 如何在绝对定位的 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>