绝对定位和css粘性页脚 [英] absolute positioning and css sticky footer
问题描述
这里是我的问题,我使用的是具有粘性页脚的布局(使用 cssstickyfooter.com 方法)。在我的容器div我有一个内容div,其中有四个其他div。像这样:
Here is my problem, I am using a layout that has a sticky footer (using the cssstickyfooter.com method). inside my container div i have a content div that has four other divs inside of it. like so:
<div class="container">
<div class="content">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
</div>
</div>
<div class="footer"></div>
为了让粘性页脚正常工作,所有的div需要 position:relative;
设置,因为div将具有不同长度的内容,并且它们需要相应地调整大小。但是我的困境开始是我需要让div 1-4有 position:absolute;
设置,使他们将堆叠在彼此的顶部有相同的(x ,y)位置。
In order for the sticky footer to work correctly all of the divs need to have position:relative;
set, because the divs will have content that will be different lengths and they need to re-size accordingly. however where my dilemma begins is that i need to have divs 1-4 have position:absolute;
set, so that they will stack on top of each other having the same (x,y) position.
有什么办法可以实现我需要的?
is there any way to achieve what i need?
推荐答案
我通常只是使用下面的粘贴div到页面(或容器)的底部:
I typically just use the following to "stick" a div to the bottom of the page (or container):
.footer {position:absolute;bottom:0;left:0;}
位置到绝对位置,它独立于外部div和它们的位置/尺寸。
Once you set position to absolute, it becomes independent of external divs and their position/dimensions.
这篇关于绝对定位和css粘性页脚的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!