在容器底部放置一个绝对元素，并设置 overflow: auto

Place an absolute element in bottom of a container with overflow: auto

我有一个徽标应该位于固定容器的最底部。它适用于 position: absolute;但是，如果我添加 overflow-y: auto;到固定容器并添加不适合视口高度的内容，我的徽标将粘在视口底部，而不是固定容器底部，从而与内容重叠。

<div class="foo">
    <div class="content"></div>
    <div class="logo-in-the-bottom">Logo</div>
</div>

.foo {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: gray;
    overflow-y: auto;
}
.content {
    height: 1000px;
}
.logo-in-the-bottom {
    position: absolute;
    bottom: 10px; left: 0;
    color: white
}

http://jsfiddle.net/1aoah1r5/

无论内容高度如何，如何将其粘贴到固定容器的底部？

试试这个：

取决于内容：

.foo {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: gray;
    overflow-y: auto;
}
.content {
    min-height: 100%;
    height: 1000px;
    position: relative;
}
.logo-in-the-bottom {
    position: absolute;
    bottom: 10px; left: 0;
    color: white
}

<div class="foo">
    <div class="content">
        <div class="logo-in-the-bottom">Logo</div>
    </div>
</div>

供将来参考：

粘性版本：

.foo {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: gray;
}
.container {
    width: 100%; height: 100%;
    overflow-y: auto;
}

.content {
    height: 1000px;
}
.logo-in-the-bottom {
    position: absolute;
    bottom: 10px; 
    left: 0;
    color: white
}

<div class="foo">
    <div class="container">
        <div class="content">
        </div>
    </div>
    <div class="logo-in-the-bottom">Logo</div>
</div>

您需要在 .foo 内添加一个带有溢出的额外容器。为什么 ？这样 .foo 是固定的，绝对值是相对于固定位置的，而不是内容，因为 .container 是溢出的。

在底部：

.foo {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: gray;
    overflow-y: auto;
}
.content {
    height: 1000px;
}
.logo-in-the-bottom {
    position: relative; //no need for absolute
    color: white
}

<div class="foo">
    <div class="content">
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
      <p>Lorem ipsum </p>
        <div class="logo-in-the-bottom">Logo</div>
    </div>
</div>

将徽标放入 .content（如果需要为徽标制作 space，则向 .content 添加底部填充）。

<style>
.content {
    height: 1000px;
    position: relative;
}
</style>

<div class="foo">
    <div class="content">
        <div class="logo-in-the-bottom">Logo</div>
    </div>
</div>

http://jsfiddle.net/1aoah1r5/1/