我的徽标应位于固定容器的最底部。它适用于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
}
无论内容高度如何,如何将其粘贴在固定容器的底部?
答案 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>