如何在绝对定位的div内创建粘性页脚？ [英] How to create a sticky footer in CSS inside an absolutely positioned div?

问题描述

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

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

 < div类= 内容 > 
< div class =page> 
 ...一些Lorem ipsum内容... 
< div class =footer>一些页脚< / div> 
< / div> 
< / div> 
  

包含以下款式：

  .content {
 position：absolute; 
 top：60px; 
 right：0; 
 bottom：0; 
剩下：0; 
} 
 
 .page {
 position：relative; 
最低身高：100％; 
} 
 
 .footer {
 height：30px; 
位置：绝对; 
 right：0; 
 bottom：0; 
剩下：0; 
} 
  

这种方法不能很好地工作，因为页脚与文本重叠当您调整页面大小时的某个级别。
如何摆脱这种重叠的行为？

一个更完整的布局示例： https://jsfiddle.net/8nrukse9/2/

解决方案

div>

更改CSS

  .page {height：100％;} 
 .page-inner {
 margin-bottom：-30px; 
最低身高：100％; 
 
 
} 
 .page-inner：after {height：30px; 
 content：; 
 display：block; 
} 
 .footer {
 height：30px; 
颜色：棕色; 
 border：1px纯棕色; 
} 
  

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

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/

解决方案

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/

这篇关于如何在绝对定位的div内创建粘性页脚？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！