绝对定位和css粘性页脚

本文介绍了绝对定位和css粘性页脚的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

这里是我的问题，我使用的是具有粘性页脚的布局（使用 cssstickyfooter 方法）。在我的容器div我有一个内容div，其中有四个其他div。像这样：

Here is my problem, I am using a layout that has a sticky footer (using the cssstickyfooter 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.