Question

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

我的方法是完全定位页脚div - 在另一个相对定位的“page”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);
  }

＆＃13;

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

＆＃13;

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

＆＃13;

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支持是必须的，我会通过计算min-height的高度来动态确定jQuery的页脚.footer偏移量。

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

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

3 个答案: