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

时间:2015-05-15 08:27:10

标签: html css position absolute

我的徽标应位于固定容器的最底部。它适用于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/

无论内容高度如何,如何将其粘贴在固定容器的底部?

2 个答案:

答案 0 :(得分:2)

试试这个:

取决于内容:

.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是溢出的。{/ p>

在底部:

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

答案 1 :(得分:0)

将徽标放入.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/