将绝对元素放置在具有溢出的容器底部：auto

Question

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

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

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

Answer 1

试试这个：

视内容而定：

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

Answer 2

将徽标放入.content（如果需要为徽标留出空间，请在 .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/