Question

我们有一个带有overflow-y:scroll的容器，该容器的页脚必须是粘性的（底部0），除非滚动容器内的内容+页脚的高度（动态）大于容器的高度。

HTML：

<div class="wrapper">
  <div class="scroll">
    <div class="content">
    Lorem ipsum dolor sit amet
    </div>
    <div class="footer">
    This must stick to the bottom until .content is too long, then go below it
    </div>
  </div>
</div>

.content和.footer可以具有更多或更少的内容。

如果可能的话，我们不想为此使用JS。

我在这里创建了一个带有几种状态的小提琴：http://jsfiddle.net/bqvtf1zo/1/

删除.footer上的position: absolute可以解决情况“很少”的情况（请参见小提琴），但会破坏其他两种情况。

Answer 1

您需要创建一个flex容器。 （尽管还有其他方法可以解决此问题：https://css-tricks.com/couple-takes-sticky-footer/）

对于容器，将display设置为flex，将flex-direction设置为column，并为可滚动内容设置flex的值1 。从页脚中删除定位，就可以了。

这将导致内容物拉伸到填充容器的高度（如果有的话），并使页脚粘在内容物的底部。

用于实施：请确保跟进flexbox的所有跨浏览器问题，例如前缀和错误。 https://github.com/philipwalton/flexbugs

.wrapper{
  position: relative;
  height: 205px;
  width: 200px;
}
.scroll{
  border: 1px solid red;
  overflow-y: scroll;
  height: 100%;
  width: 100%;
   display:flex;
  flex-direction: column;
}
.content{
  background-color: #ccc;
  flex:1;

}
.footer{
  background-color: #efefef;

}

<h1>
 little content
</h1>

<div class="wrapper">
  <div class="scroll">
    <div class="content">
    Lorem ipsum dolor sit amet
    </div>
    <div class="footer">
    This must stick to the bottom until .content is too long, then go below it
    </div>
  </div>
</div>


<h1>
 large content
</h1>

<div class="wrapper">
  <div class="scroll">
    <div class="content">
    1. Lorem ipsum dolor sit<br>
    2. Lorem ipsum dolor sit<br>
    3. Lorem ipsum dolor sit<br>
    4. Lorem ipsum dolor sit<br>
    5. Lorem ipsum dolor sit<br>
    6. Lorem ipsum dolor sit<br>
    7. Lorem ipsum dolor sit<br>
    8. Lorem ipsum dolor sit<br>
    9. Lorem ipsum dolor sit<br>
    10. Lorem ipsum dolor sit<br>
    11. Lorem ipsum dolor sit<br>
    12. Lorem ipsum dolor sit<br>
    13. Lorem ipsum dolor sit<br>
    </div>
    <div class="footer">
    This must stick to the bottom until .content is too long, then go below it
    </div>
  </div>
</div>

<h1>
 large content with large footer
</h1>

<div class="wrapper">
  <div class="scroll">
    <div class="content">
    1. Lorem ipsum dolor sit<br>
    2. Lorem ipsum dolor sit<br>
    3. Lorem ipsum dolor sit<br>
    4. Lorem ipsum dolor sit<br>
    5. Lorem ipsum dolor sit<br>
    6. Lorem ipsum dolor sit<br>
    7. Lorem ipsum dolor sit<br>
    8. Lorem ipsum dolor sit<br>
    9. Lorem ipsum dolor sit<br>
    10. Lorem ipsum dolor sit<br>
    11. Lorem ipsum dolor sit<br>
    12. Lorem ipsum dolor sit<br>
    13. Lorem ipsum dolor sit<br>
    </div>
    <div class="footer">
    This must stick to the bottom until .content is too long, then go further down<br>
    Some additional content
    </div>
  </div>
</div>

y滚动式容器中的粘性页脚，具体取决于内容的高度

1 个答案: